diff --git a/docs/catalog/components/ai-generation-canvas.mdx b/docs/catalog/components/ai-generation-canvas.mdx
index cc499043bd..367820b7f5 100644
--- a/docs/catalog/components/ai-generation-canvas.mdx
+++ b/docs/catalog/components/ai-generation-canvas.mdx
@@ -24,13 +24,13 @@ That writes one file: `compositions/components/ai-generation-canvas.html`.
 
 ```html
 <!--
-  AI Generation Canvas - remocn component ported to HyperFrames authoring format.
+  AI Generation Canvas - catalog component for HyperFrames.
 
   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="hf-catalog-ai-generation-canvas">
   <div class="panel prompt">
     <h3>AI Generation Canvas</h3>
     <p>A prompt composer expands into a generated dashboard preview.</p>
@@ -46,7 +46,7 @@ That writes one file: `compositions/components/ai-generation-canvas.html`.
 </div>
 
 <style>
-  .hf-remocn-ai-generation-canvas {
+  .hf-catalog-ai-generation-canvas {
     --hf-accent: var(--accent, #18181b);
     --hf-ink: #111827;
     --hf-muted: #6b7280;
@@ -54,7 +54,7 @@ That writes one file: `compositions/components/ai-generation-canvas.html`.
     color: var(--hf-ink);
     font-family: Inter, system-ui, sans-serif;
   }
-  .hf-remocn-ai-generation-canvas {
+  .hf-catalog-ai-generation-canvas {
     width: 820px;
     min-height: 460px;
     border-radius: 34px;
@@ -66,19 +66,19 @@ That writes one file: `compositions/components/ai-generation-canvas.html`.
     gap: 22px;
     overflow: hidden;
   }
-  .hf-remocn-ai-generation-canvas .panel {
+  .hf-catalog-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 {
+  .hf-catalog-ai-generation-canvas .prompt {
     display: grid;
     gap: 12px;
     align-content: start;
   }
-  .hf-remocn-ai-generation-canvas .pill {
+  .hf-catalog-ai-generation-canvas .pill {
     height: 42px;
     border-radius: 999px;
     background: #111827;
@@ -89,11 +89,11 @@ That writes one file: `compositions/components/ai-generation-canvas.html`.
     font-weight: 800;
     transform: translateX(var(--hf-pill-x, 0px));
   }
-  .hf-remocn-ai-generation-canvas .preview {
+  .hf-catalog-ai-generation-canvas .preview {
     display: grid;
     gap: 14px;
   }
-  .hf-remocn-ai-generation-canvas .card {
+  .hf-catalog-ai-generation-canvas .card {
     min-height: 78px;
     border-radius: 18px;
     background: #fff;
@@ -102,12 +102,12 @@ That writes one file: `compositions/components/ai-generation-canvas.html`.
       scale(var(--hf-card-scale, 1));
     opacity: var(--hf-card-opacity, 1);
   }
-  .hf-remocn-ai-generation-canvas h3 {
+  .hf-catalog-ai-generation-canvas h3 {
     margin: 0 0 14px;
     font-size: 32px;
     letter-spacing: -0.04em;
   }
-  .hf-remocn-ai-generation-canvas p {
+  .hf-catalog-ai-generation-canvas p {
     margin: 0;
     color: #475569;
   }
@@ -115,7 +115,7 @@ That writes one file: `compositions/components/ai-generation-canvas.html`.
 
 <!--
   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);
+  tl.fromTo('.hf-catalog-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-catalog-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);
 -->
 ```
 
@@ -127,7 +127,7 @@ Open `compositions/components/ai-generation-canvas.html` and paste its contents
 
 {/* hf:generated-footer */}
 
-Tagged `showcase` `remocn-port` `ai`.
+Tagged `showcase` `ai`.
 
 ## Related topics
 
diff --git a/docs/catalog/components/ai-prompt-flow.mdx b/docs/catalog/components/ai-prompt-flow.mdx
index f1ee29ed62..6f49af120a 100644
--- a/docs/catalog/components/ai-prompt-flow.mdx
+++ b/docs/catalog/components/ai-prompt-flow.mdx
@@ -24,7 +24,7 @@ That writes one file: `compositions/components/ai-prompt-flow.html`.
 
 ```html
 <!--
-  AI Prompt Flow - Remocn-inspired composed UI flow for HyperFrames.
+  AI Prompt Flow - 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.
@@ -136,7 +136,7 @@ Open `compositions/components/ai-prompt-flow.html` and paste its contents into y
 
 {/* hf:generated-footer */}
 
-Tagged `ui-flow` `remocn-port` `ai` `prompt`.
+Tagged `ui-flow` `ai` `prompt`.
 
 ## Related topics
 
diff --git a/docs/catalog/components/animated-bar-chart.mdx b/docs/catalog/components/animated-bar-chart.mdx
index d1ce67f7d3..10bbc534d2 100644
--- a/docs/catalog/components/animated-bar-chart.mdx
+++ b/docs/catalog/components/animated-bar-chart.mdx
@@ -24,13 +24,13 @@ That writes one file: `compositions/components/animated-bar-chart.html`.
 
 ```html
 <!--
-  Animated Bar Chart - remocn component ported to HyperFrames authoring format.
+  Animated Bar Chart - catalog component for HyperFrames.
 
   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">
+<div class="hf-catalog-animated-bar-chart">
   <header>
     <div>
       <h3>Animated Bar Chart</h3>
@@ -56,7 +56,7 @@ That writes one file: `compositions/components/animated-bar-chart.html`.
 </div>
 
 <style>
-  .hf-remocn-animated-bar-chart {
+  .hf-catalog-animated-bar-chart {
     --hf-accent: var(--accent, #111827);
     --hf-ink: #111827;
     --hf-l1: rgba(17, 24, 39, 0.72);
@@ -69,7 +69,7 @@ That writes one file: `compositions/components/animated-bar-chart.html`.
     color: var(--hf-ink);
     font-family: Inter, system-ui, sans-serif;
   }
-  .hf-remocn-animated-bar-chart {
+  .hf-catalog-animated-bar-chart {
     width: 760px;
     min-height: 420px;
     border-radius: 28px;
@@ -79,38 +79,38 @@ That writes one file: `compositions/components/animated-bar-chart.html`.
     display: grid;
     gap: 22px;
   }
-  .hf-remocn-animated-bar-chart header {
+  .hf-catalog-animated-bar-chart header {
     display: flex;
     justify-content: space-between;
     align-items: end;
   }
-  .hf-remocn-animated-bar-chart h3 {
+  .hf-catalog-animated-bar-chart h3 {
     margin: 0;
     font-size: 34px;
     letter-spacing: -0.04em;
   }
-  .hf-remocn-animated-bar-chart strong {
+  .hf-catalog-animated-bar-chart strong {
     font-size: 54px;
     letter-spacing: -0.06em;
   }
-  .hf-remocn-animated-bar-chart .bars {
+  .hf-catalog-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 {
+  .hf-catalog-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 {
+  .hf-catalog-animated-bar-chart svg {
     width: 100%;
     height: 210px;
     overflow: visible;
   }
-  .hf-remocn-animated-bar-chart path {
+  .hf-catalog-animated-bar-chart path {
     color: var(--hf-l2);
     stroke-dasharray: 900;
     stroke-dashoffset: var(--hf-dash, 0);
@@ -119,7 +119,7 @@ That writes one file: `compositions/components/animated-bar-chart.html`.
 
 <!--
   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);
+  tl.fromTo('.hf-catalog-animated-bar-chart', { '--hf-grow': 0, '--hf-dash': 900 }, { '--hf-grow': 1, '--hf-dash': 0, duration: 1.2, ease: 'power3.out' }, startTime);
 -->
 ```
 
@@ -131,7 +131,7 @@ Open `compositions/components/animated-bar-chart.html` and paste its contents in
 
 {/* hf:generated-footer */}
 
-Tagged `data` `remocn-port`.
+Tagged `data`.
 
 ## Related topics
 
diff --git a/docs/catalog/components/blur-in.mdx b/docs/catalog/components/blur-in.mdx
index 0a2431cdea..c8a98e9bae 100644
--- a/docs/catalog/components/blur-in.mdx
+++ b/docs/catalog/components/blur-in.mdx
@@ -543,7 +543,7 @@ defaults, so this behaves exactly like the preview above until you change one:
 
 {/* hf:generated-footer */}
 
-Tagged `video-primitive` `remocn-port` `blur-in` `text-effect`.
+Tagged `video-primitive` `blur-in` `text-effect`.
 
 ## Related topics
 
diff --git a/docs/catalog/components/blur-out-up.mdx b/docs/catalog/components/blur-out-up.mdx
index 225329cf10..35c1247e47 100644
--- a/docs/catalog/components/blur-out-up.mdx
+++ b/docs/catalog/components/blur-out-up.mdx
@@ -15,7 +15,7 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 ```html blur-out-up.html
 <!--
-  Blur Out Up - remocn typography primitive for HyperFrames.
+  Blur Out Up - 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.
@@ -41,7 +41,7 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 -->
 
 <div
-  class="hf-remocn-blur-out-up"
+  class="hf-catalog-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" }] },
@@ -53,19 +53,19 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 </div>
 
 <style>
-  .hf-remocn-blur-out-up {
+  .hf-catalog-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 {
+  .hf-catalog-blur-out-up {
     display: inline-flex;
     gap: 12px;
     font-size: 56px;
     line-height: 1;
   }
-  .hf-remocn-blur-out-up span {
+  .hf-catalog-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)),
@@ -110,7 +110,7 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
     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");
+    var roots = document.querySelectorAll(".hf-catalog-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));
@@ -122,7 +122,7 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 <!--
   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);
+  tl.fromTo('.hf-catalog-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);
 -->
 ```
 
@@ -163,7 +163,7 @@ defaults, so this behaves exactly like the preview above until you change one:
 
 ```html
 <!--
-  Blur Out Up - remocn typography primitive for HyperFrames.
+  Blur Out Up - 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.
@@ -189,7 +189,7 @@ defaults, so this behaves exactly like the preview above until you change one:
 -->
 
 <div
-  class="hf-remocn-blur-out-up"
+  class="hf-catalog-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" }] },
@@ -201,19 +201,19 @@ defaults, so this behaves exactly like the preview above until you change one:
 </div>
 
 <style>
-  .hf-remocn-blur-out-up {
+  .hf-catalog-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 {
+  .hf-catalog-blur-out-up {
     display: inline-flex;
     gap: 12px;
     font-size: 56px;
     line-height: 1;
   }
-  .hf-remocn-blur-out-up span {
+  .hf-catalog-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)),
@@ -258,7 +258,7 @@ defaults, so this behaves exactly like the preview above until you change one:
     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");
+    var roots = document.querySelectorAll(".hf-catalog-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));
@@ -270,7 +270,7 @@ defaults, so this behaves exactly like the preview above until you change one:
 
 <!--
   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);
+  tl.fromTo('.hf-catalog-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);
 -->
 ```
 
@@ -282,7 +282,7 @@ Open `compositions/components/blur-out-up.html` and paste its contents into your
 
 {/* hf:generated-footer */}
 
-Tagged `motion-primitive` `remocn-port` `typography`.
+Tagged `motion-primitive` `typography`.
 
 ## Related topics
 
diff --git a/docs/catalog/components/checkout-flow.mdx b/docs/catalog/components/checkout-flow.mdx
index 6183392e62..ae7ef820da 100644
--- a/docs/catalog/components/checkout-flow.mdx
+++ b/docs/catalog/components/checkout-flow.mdx
@@ -24,7 +24,7 @@ That writes one file: `compositions/components/checkout-flow.html`.
 
 ```html
 <!--
-  Checkout Flow - Remocn-inspired composed UI flow for HyperFrames.
+  Checkout Flow - 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.
@@ -122,7 +122,7 @@ Open `compositions/components/checkout-flow.html` and paste its contents into yo
 
 {/* hf:generated-footer */}
 
-Tagged `ui-flow` `remocn-port` `checkout` `commerce`.
+Tagged `ui-flow` `checkout` `commerce`.
 
 ## Related topics
 
diff --git a/docs/catalog/components/chromatic-aberration-wipe.mdx b/docs/catalog/components/chromatic-aberration-wipe.mdx
index 2282ba0959..4643257761 100644
--- a/docs/catalog/components/chromatic-aberration-wipe.mdx
+++ b/docs/catalog/components/chromatic-aberration-wipe.mdx
@@ -15,7 +15,7 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 ```html chromatic-aberration-wipe.html
 <!--
-  Chromatic Aberration Wipe - remocn component ported to HyperFrames authoring format.
+  Chromatic Aberration Wipe - catalog component for HyperFrames.
 
   Paste the markup and CSS into a composition. Drive the timeline integration
   from a paused GSAP timeline so renders remain deterministic.
@@ -42,7 +42,7 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 -->
 
 <div
-  class="hf-remocn-chromatic-aberration-wipe"
+  class="hf-catalog-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" }] },
@@ -56,7 +56,7 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 </div>
 
 <style>
-  .hf-remocn-chromatic-aberration-wipe {
+  .hf-catalog-chromatic-aberration-wipe {
     --hf-accent: #2563eb;
     --hf-ink: #111827;
     --hf-muted: #6b7280;
@@ -64,7 +64,7 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
     color: var(--hf-ink);
     font-family: Inter, system-ui, sans-serif;
   }
-  .hf-remocn-chromatic-aberration-wipe {
+  .hf-catalog-chromatic-aberration-wipe {
     position: relative;
     width: 760px;
     height: 428px;
@@ -73,7 +73,7 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
     background: #111827;
     box-shadow: 0 28px 80px rgba(15, 23, 42, 0.2);
   }
-  .hf-remocn-chromatic-aberration-wipe .scene {
+  .hf-catalog-chromatic-aberration-wipe .scene {
     position: absolute;
     inset: 0;
     display: grid;
@@ -83,7 +83,7 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
     letter-spacing: -0.05em;
     color: #fff;
   }
-  .hf-remocn-chromatic-aberration-wipe .from {
+  .hf-catalog-chromatic-aberration-wipe .from {
     background: linear-gradient(135deg, #111827, #374151);
     transform: translate(
         calc(var(--hf-from-x, 0px) * var(--hf-wipe-ax, 1)),
@@ -92,7 +92,7 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
       scale(var(--hf-from-scale, 1));
     filter: blur(var(--hf-from-blur, 0px));
   }
-  .hf-remocn-chromatic-aberration-wipe .to {
+  .hf-catalog-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)),
@@ -106,14 +106,14 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
         calc(var(--hf-clip-left, 0%) + var(--hf-clip-right, 100%) * var(--hf-wipe-l, 0))
     );
   }
-  .hf-remocn-chromatic-aberration-wipe .fx {
+  .hf-catalog-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 {
+  .hf-catalog-chromatic-aberration-wipe .rgb {
     position: absolute;
     inset: 0;
     pointer-events: none;
@@ -160,7 +160,7 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
     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");
+    var roots = document.querySelectorAll(".hf-catalog-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);
@@ -177,7 +177,7 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 <!--
   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);
+  tl.fromTo('.hf-catalog-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-catalog-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-catalog-chromatic-aberration-wipe .fx', { '--hf-fx-x': '-110%' }, { '--hf-fx-x': '110%', duration: 0.58, ease: 'power2.inOut' }, startTime + 0.18); tl.fromTo('.hf-catalog-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);
 -->
 ```
 
@@ -217,7 +217,7 @@ defaults, so this behaves exactly like the preview above until you change one:
 
 ```html
 <!--
-  Chromatic Aberration Wipe - remocn component ported to HyperFrames authoring format.
+  Chromatic Aberration Wipe - catalog component for HyperFrames.
 
   Paste the markup and CSS into a composition. Drive the timeline integration
   from a paused GSAP timeline so renders remain deterministic.
@@ -244,7 +244,7 @@ defaults, so this behaves exactly like the preview above until you change one:
 -->
 
 <div
-  class="hf-remocn-chromatic-aberration-wipe"
+  class="hf-catalog-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" }] },
@@ -258,7 +258,7 @@ defaults, so this behaves exactly like the preview above until you change one:
 </div>
 
 <style>
-  .hf-remocn-chromatic-aberration-wipe {
+  .hf-catalog-chromatic-aberration-wipe {
     --hf-accent: #2563eb;
     --hf-ink: #111827;
     --hf-muted: #6b7280;
@@ -266,7 +266,7 @@ defaults, so this behaves exactly like the preview above until you change one:
     color: var(--hf-ink);
     font-family: Inter, system-ui, sans-serif;
   }
-  .hf-remocn-chromatic-aberration-wipe {
+  .hf-catalog-chromatic-aberration-wipe {
     position: relative;
     width: 760px;
     height: 428px;
@@ -275,7 +275,7 @@ defaults, so this behaves exactly like the preview above until you change one:
     background: #111827;
     box-shadow: 0 28px 80px rgba(15, 23, 42, 0.2);
   }
-  .hf-remocn-chromatic-aberration-wipe .scene {
+  .hf-catalog-chromatic-aberration-wipe .scene {
     position: absolute;
     inset: 0;
     display: grid;
@@ -285,7 +285,7 @@ defaults, so this behaves exactly like the preview above until you change one:
     letter-spacing: -0.05em;
     color: #fff;
   }
-  .hf-remocn-chromatic-aberration-wipe .from {
+  .hf-catalog-chromatic-aberration-wipe .from {
     background: linear-gradient(135deg, #111827, #374151);
     transform: translate(
         calc(var(--hf-from-x, 0px) * var(--hf-wipe-ax, 1)),
@@ -294,7 +294,7 @@ defaults, so this behaves exactly like the preview above until you change one:
       scale(var(--hf-from-scale, 1));
     filter: blur(var(--hf-from-blur, 0px));
   }
-  .hf-remocn-chromatic-aberration-wipe .to {
+  .hf-catalog-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)),
@@ -308,14 +308,14 @@ defaults, so this behaves exactly like the preview above until you change one:
         calc(var(--hf-clip-left, 0%) + var(--hf-clip-right, 100%) * var(--hf-wipe-l, 0))
     );
   }
-  .hf-remocn-chromatic-aberration-wipe .fx {
+  .hf-catalog-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 {
+  .hf-catalog-chromatic-aberration-wipe .rgb {
     position: absolute;
     inset: 0;
     pointer-events: none;
@@ -362,7 +362,7 @@ defaults, so this behaves exactly like the preview above until you change one:
     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");
+    var roots = document.querySelectorAll(".hf-catalog-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);
@@ -379,7 +379,7 @@ defaults, so this behaves exactly like the preview above until you change one:
 
 <!--
   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);
+  tl.fromTo('.hf-catalog-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-catalog-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-catalog-chromatic-aberration-wipe .fx', { '--hf-fx-x': '-110%' }, { '--hf-fx-x': '110%', duration: 0.58, ease: 'power2.inOut' }, startTime + 0.18); tl.fromTo('.hf-catalog-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);
 -->
 ```
 
@@ -391,7 +391,7 @@ Open `compositions/components/chromatic-aberration-wipe.html` and paste its cont
 
 {/* hf:generated-footer */}
 
-Tagged `video-primitive` `transition-primitive` `remocn-port`.
+Tagged `video-primitive` `transition-primitive`.
 
 ## Related topics
 
diff --git a/docs/catalog/components/confetti.mdx b/docs/catalog/components/confetti.mdx
index 3bac4f760a..82618a1dfa 100644
--- a/docs/catalog/components/confetti.mdx
+++ b/docs/catalog/components/confetti.mdx
@@ -24,13 +24,13 @@ That writes one file: `compositions/components/confetti.html`.
 
 ```html
 <!--
-  Confetti - remocn component ported to HyperFrames authoring format.
+  Confetti - catalog component for HyperFrames.
 
   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="hf-catalog-confetti">
   <div class="mesh"></div>
   <div class="card">
     <div class="spot"></div>
@@ -64,11 +64,11 @@ That writes one file: `compositions/components/confetti.html`.
 </div>
 
 <style>
-  .hf-remocn-confetti {
+  .hf-catalog-confetti {
     color: var(--fg, #111827);
     font-family: var(--font-body, Inter, system-ui, sans-serif);
   }
-  .hf-remocn-confetti {
+  .hf-catalog-confetti {
     position: relative;
     width: 760px;
     height: 428px;
@@ -77,7 +77,7 @@ That writes one file: `compositions/components/confetti.html`.
     background: var(--bg, #080b12);
     box-shadow: 0 28px 80px color-mix(in srgb, var(--bg, #0f172a) 20%, transparent);
   }
-  .hf-remocn-confetti .mesh {
+  .hf-catalog-confetti .mesh {
     position: absolute;
     inset: -22%;
     filter: blur(44px);
@@ -99,7 +99,7 @@ That writes one file: `compositions/components/confetti.html`.
         transparent 34%
       );
   }
-  .hf-remocn-confetti .card {
+  .hf-catalog-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);
@@ -111,7 +111,7 @@ That writes one file: `compositions/components/confetti.html`.
     text-align: center;
     overflow: hidden;
   }
-  .hf-remocn-confetti .spot {
+  .hf-catalog-confetti .spot {
     position: absolute;
     width: 260px;
     height: 260px;
@@ -124,7 +124,7 @@ That writes one file: `compositions/components/confetti.html`.
     transform: translate(var(--hf-spot-x, 0px), var(--hf-spot-y, 0px));
     mix-blend-mode: screen;
   }
-  .hf-remocn-confetti .particle {
+  .hf-catalog-confetti .particle {
     position: absolute;
     left: 50%;
     top: 54%;
@@ -135,12 +135,12 @@ That writes one file: `compositions/components/confetti.html`.
     transform: translate(var(--hf-px, 0px), var(--hf-py, 0px)) rotate(var(--hf-pr, 0deg));
     opacity: var(--hf-po, 0);
   }
-  .hf-remocn-confetti h3 {
+  .hf-catalog-confetti h3 {
     margin: 0;
     font-size: 44px;
     letter-spacing: -0.04em;
   }
-  .hf-remocn-confetti p {
+  .hf-catalog-confetti p {
     margin: var(--space-1, 8px) 0 0;
     color: color-mix(in srgb, var(--muted, #ffffff) 70%, transparent);
   }
@@ -148,7 +148,7 @@ That writes one file: `compositions/components/confetti.html`.
 
 <!--
   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); }
+  tl.fromTo('.hf-catalog-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-catalog-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-catalog-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); }
 -->
 ```
 
@@ -160,7 +160,7 @@ Open `compositions/components/confetti.html` and paste its contents into your co
 
 {/* hf:generated-footer */}
 
-Tagged `effect` `remocn-port`.
+Tagged `effect`.
 
 ## Related topics
 
diff --git a/docs/catalog/components/directional-wipe.mdx b/docs/catalog/components/directional-wipe.mdx
index 8ac621ab2c..b25d9020ff 100644
--- a/docs/catalog/components/directional-wipe.mdx
+++ b/docs/catalog/components/directional-wipe.mdx
@@ -15,7 +15,7 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 ```html directional-wipe.html
 <!--
-  Directional Wipe - remocn component ported to HyperFrames authoring format.
+  Directional Wipe - catalog component for HyperFrames.
 
   Paste the markup and CSS into a composition. Drive the timeline integration
   from a paused GSAP timeline so renders remain deterministic.
@@ -37,7 +37,7 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 -->
 
 <div
-  class="hf-remocn-directional-wipe"
+  class="hf-catalog-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" }] }
@@ -50,7 +50,7 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 </div>
 
 <style>
-  .hf-remocn-directional-wipe {
+  .hf-catalog-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);
@@ -62,7 +62,7 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
     color: var(--hf-ink);
     font-family: Inter, system-ui, sans-serif;
   }
-  .hf-remocn-directional-wipe {
+  .hf-catalog-directional-wipe {
     position: relative;
     width: 760px;
     height: 428px;
@@ -71,7 +71,7 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
     background: #111827;
     box-shadow: 0 28px 80px rgba(15, 23, 42, 0.2);
   }
-  .hf-remocn-directional-wipe .scene {
+  .hf-catalog-directional-wipe .scene {
     position: absolute;
     inset: 0;
     display: grid;
@@ -81,7 +81,7 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
     letter-spacing: -0.05em;
     color: #fff;
   }
-  .hf-remocn-directional-wipe .from {
+  .hf-catalog-directional-wipe .from {
     background:
       repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 4px),
       var(--hf-l4);
@@ -89,7 +89,7 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
       scale(var(--hf-from-scale, 1));
     filter: blur(var(--hf-from-blur, 0px));
   }
-  .hf-remocn-directional-wipe .to {
+  .hf-catalog-directional-wipe .to {
     background:
       repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 4px),
       var(--hf-l3);
@@ -100,14 +100,14 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
         var(--hf-clip-left, 0%)
     );
   }
-  .hf-remocn-directional-wipe .fx {
+  .hf-catalog-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 {
+  .hf-catalog-directional-wipe .rgb {
     position: absolute;
     inset: 0;
     pointer-events: none;
@@ -148,7 +148,7 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
     var palette = palettes[pick(palettes, vars.palette, "slate")];
     var corner = corners[pick(corners, vars.corner, "rounded")];
 
-    var roots = document.querySelectorAll(".hf-remocn-directional-wipe");
+    var roots = document.querySelectorAll(".hf-catalog-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);
@@ -158,7 +158,7 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 <!--
   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);
+  tl.fromTo('.hf-catalog-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-catalog-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-catalog-directional-wipe .fx', { '--hf-fx-x': '-110%' }, { '--hf-fx-x': '110%', duration: 0.58, ease: 'power2.inOut' }, startTime + 0.18); tl.fromTo('.hf-catalog-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);
 -->
 ```
 
@@ -197,7 +197,7 @@ defaults, so this behaves exactly like the preview above until you change one:
 
 ```html
 <!--
-  Directional Wipe - remocn component ported to HyperFrames authoring format.
+  Directional Wipe - catalog component for HyperFrames.
 
   Paste the markup and CSS into a composition. Drive the timeline integration
   from a paused GSAP timeline so renders remain deterministic.
@@ -219,7 +219,7 @@ defaults, so this behaves exactly like the preview above until you change one:
 -->
 
 <div
-  class="hf-remocn-directional-wipe"
+  class="hf-catalog-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" }] }
@@ -232,7 +232,7 @@ defaults, so this behaves exactly like the preview above until you change one:
 </div>
 
 <style>
-  .hf-remocn-directional-wipe {
+  .hf-catalog-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);
@@ -244,7 +244,7 @@ defaults, so this behaves exactly like the preview above until you change one:
     color: var(--hf-ink);
     font-family: Inter, system-ui, sans-serif;
   }
-  .hf-remocn-directional-wipe {
+  .hf-catalog-directional-wipe {
     position: relative;
     width: 760px;
     height: 428px;
@@ -253,7 +253,7 @@ defaults, so this behaves exactly like the preview above until you change one:
     background: #111827;
     box-shadow: 0 28px 80px rgba(15, 23, 42, 0.2);
   }
-  .hf-remocn-directional-wipe .scene {
+  .hf-catalog-directional-wipe .scene {
     position: absolute;
     inset: 0;
     display: grid;
@@ -263,7 +263,7 @@ defaults, so this behaves exactly like the preview above until you change one:
     letter-spacing: -0.05em;
     color: #fff;
   }
-  .hf-remocn-directional-wipe .from {
+  .hf-catalog-directional-wipe .from {
     background:
       repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 4px),
       var(--hf-l4);
@@ -271,7 +271,7 @@ defaults, so this behaves exactly like the preview above until you change one:
       scale(var(--hf-from-scale, 1));
     filter: blur(var(--hf-from-blur, 0px));
   }
-  .hf-remocn-directional-wipe .to {
+  .hf-catalog-directional-wipe .to {
     background:
       repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 4px),
       var(--hf-l3);
@@ -282,14 +282,14 @@ defaults, so this behaves exactly like the preview above until you change one:
         var(--hf-clip-left, 0%)
     );
   }
-  .hf-remocn-directional-wipe .fx {
+  .hf-catalog-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 {
+  .hf-catalog-directional-wipe .rgb {
     position: absolute;
     inset: 0;
     pointer-events: none;
@@ -330,7 +330,7 @@ defaults, so this behaves exactly like the preview above until you change one:
     var palette = palettes[pick(palettes, vars.palette, "slate")];
     var corner = corners[pick(corners, vars.corner, "rounded")];
 
-    var roots = document.querySelectorAll(".hf-remocn-directional-wipe");
+    var roots = document.querySelectorAll(".hf-catalog-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);
@@ -340,7 +340,7 @@ defaults, so this behaves exactly like the preview above until you change one:
 
 <!--
   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);
+  tl.fromTo('.hf-catalog-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-catalog-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-catalog-directional-wipe .fx', { '--hf-fx-x': '-110%' }, { '--hf-fx-x': '110%', duration: 0.58, ease: 'power2.inOut' }, startTime + 0.18); tl.fromTo('.hf-catalog-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);
 -->
 ```
 
@@ -352,7 +352,7 @@ Open `compositions/components/directional-wipe.html` and paste its contents into
 
 {/* hf:generated-footer */}
 
-Tagged `transition-primitive` `remocn-port`.
+Tagged `transition-primitive`.
 
 ## Related topics
 
diff --git a/docs/catalog/components/focus-blur-resolve.mdx b/docs/catalog/components/focus-blur-resolve.mdx
index ca9a5f1fe7..c6720a1034 100644
--- a/docs/catalog/components/focus-blur-resolve.mdx
+++ b/docs/catalog/components/focus-blur-resolve.mdx
@@ -15,7 +15,7 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 ```html focus-blur-resolve.html
 <!--
-  Focus Blur Resolve - remocn typography primitive for HyperFrames.
+  Focus Blur Resolve - 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.
@@ -38,7 +38,7 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 -->
 
 <div
-  class="hf-remocn-focus-blur-resolve"
+  class="hf-catalog-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" }] },
@@ -49,19 +49,19 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 </div>
 
 <style>
-  .hf-remocn-focus-blur-resolve {
+  .hf-catalog-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 {
+  .hf-catalog-focus-blur-resolve {
     display: inline-flex;
     gap: 12px;
     font-size: var(--hf-word-size, 56px);
     line-height: 1;
   }
-  .hf-remocn-focus-blur-resolve span {
+  .hf-catalog-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));
@@ -92,7 +92,7 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
     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");
+    var roots = document.querySelectorAll(".hf-catalog-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);
@@ -103,7 +103,7 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 <!--
   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);
+  tl.fromTo('.hf-catalog-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);
 -->
 ```
 
@@ -143,7 +143,7 @@ defaults, so this behaves exactly like the preview above until you change one:
 
 ```html
 <!--
-  Focus Blur Resolve - remocn typography primitive for HyperFrames.
+  Focus Blur Resolve - 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.
@@ -166,7 +166,7 @@ defaults, so this behaves exactly like the preview above until you change one:
 -->
 
 <div
-  class="hf-remocn-focus-blur-resolve"
+  class="hf-catalog-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" }] },
@@ -177,19 +177,19 @@ defaults, so this behaves exactly like the preview above until you change one:
 </div>
 
 <style>
-  .hf-remocn-focus-blur-resolve {
+  .hf-catalog-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 {
+  .hf-catalog-focus-blur-resolve {
     display: inline-flex;
     gap: 12px;
     font-size: var(--hf-word-size, 56px);
     line-height: 1;
   }
-  .hf-remocn-focus-blur-resolve span {
+  .hf-catalog-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));
@@ -220,7 +220,7 @@ defaults, so this behaves exactly like the preview above until you change one:
     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");
+    var roots = document.querySelectorAll(".hf-catalog-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);
@@ -231,7 +231,7 @@ defaults, so this behaves exactly like the preview above until you change one:
 
 <!--
   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);
+  tl.fromTo('.hf-catalog-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);
 -->
 ```
 
@@ -243,7 +243,7 @@ Open `compositions/components/focus-blur-resolve.html` and paste its contents in
 
 {/* hf:generated-footer */}
 
-Tagged `motion-primitive` `remocn-port` `typography`.
+Tagged `motion-primitive` `typography`.
 
 ## Related topics
 
diff --git a/docs/catalog/components/line-by-line-slide.mdx b/docs/catalog/components/line-by-line-slide.mdx
index 5d2d980327..468a2bf0af 100644
--- a/docs/catalog/components/line-by-line-slide.mdx
+++ b/docs/catalog/components/line-by-line-slide.mdx
@@ -15,7 +15,7 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 ```html line-by-line-slide.html
 <!--
-  Line-by-Line Slide - remocn typography primitive for HyperFrames.
+  Line-by-Line Slide - 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.
@@ -40,7 +40,7 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 -->
 
 <div
-  class="hf-remocn-line-by-line-slide"
+  class="hf-catalog-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"}]},
@@ -52,20 +52,20 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 </div>
 
 <style>
-  .hf-remocn-line-by-line-slide {
+  .hf-catalog-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 {
+  .hf-catalog-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 {
+  .hf-catalog-line-by-line-slide span {
     display: block;
     transform: translate(
       calc(var(--hf-line-x, 0px) * var(--hf-line-axis-x, 1)),
@@ -104,7 +104,7 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
     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");
+    var roots = document.querySelectorAll(".hf-catalog-line-by-line-slide");
     for (var i = 0; i < roots.length; i += 1) {
       var root = roots[i];
       root.style.setProperty("--hf-line-size", size);
@@ -117,7 +117,7 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 <!--
   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);
+  tl.fromTo('.hf-catalog-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);
 -->
 ```
 
@@ -158,7 +158,7 @@ defaults, so this behaves exactly like the preview above until you change one:
 
 ```html
 <!--
-  Line-by-Line Slide - remocn typography primitive for HyperFrames.
+  Line-by-Line Slide - 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.
@@ -183,7 +183,7 @@ defaults, so this behaves exactly like the preview above until you change one:
 -->
 
 <div
-  class="hf-remocn-line-by-line-slide"
+  class="hf-catalog-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"}]},
@@ -195,20 +195,20 @@ defaults, so this behaves exactly like the preview above until you change one:
 </div>
 
 <style>
-  .hf-remocn-line-by-line-slide {
+  .hf-catalog-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 {
+  .hf-catalog-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 {
+  .hf-catalog-line-by-line-slide span {
     display: block;
     transform: translate(
       calc(var(--hf-line-x, 0px) * var(--hf-line-axis-x, 1)),
@@ -247,7 +247,7 @@ defaults, so this behaves exactly like the preview above until you change one:
     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");
+    var roots = document.querySelectorAll(".hf-catalog-line-by-line-slide");
     for (var i = 0; i < roots.length; i += 1) {
       var root = roots[i];
       root.style.setProperty("--hf-line-size", size);
@@ -260,7 +260,7 @@ defaults, so this behaves exactly like the preview above until you change one:
 
 <!--
   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);
+  tl.fromTo('.hf-catalog-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);
 -->
 ```
 
@@ -272,7 +272,7 @@ Open `compositions/components/line-by-line-slide.html` and paste its contents in
 
 {/* hf:generated-footer */}
 
-Tagged `motion-primitive` `remocn-port` `typography`.
+Tagged `motion-primitive` `typography`.
 
 ## Related topics
 
diff --git a/docs/catalog/components/matrix-decode.mdx b/docs/catalog/components/matrix-decode.mdx
index 006b5c39ca..c1413fa715 100644
--- a/docs/catalog/components/matrix-decode.mdx
+++ b/docs/catalog/components/matrix-decode.mdx
@@ -15,7 +15,7 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 ```html matrix-decode.html
 <!--
-  Matrix Decode - remocn typography primitive for HyperFrames.
+  Matrix Decode - 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.
@@ -41,7 +41,7 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 -->
 
 <div
-  class="hf-remocn-matrix-decode"
+  class="hf-catalog-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" },
@@ -55,13 +55,13 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 </div>
 
 <style>
-  .hf-remocn-matrix-decode {
+  .hf-catalog-matrix-decode {
     color: #18181b;
     font-family: Inter, system-ui, sans-serif;
     font-weight: 900;
     letter-spacing: -0.04em;
   }
-  .hf-remocn-matrix-decode {
+  .hf-catalog-matrix-decode {
     display: inline-flex;
     gap: 3px;
     font:
@@ -74,7 +74,7 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
     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 {
+  .hf-catalog-matrix-decode span {
     display: inline-block;
     min-width: 0.64em;
     opacity: var(--hf-matrix-opacity, 1);
@@ -118,7 +118,7 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
     var accent = accents[pick(accents, vars.accent, "green")];
     var glow = glows[pick(glows, vars.glow, "standard")];
 
-    var roots = document.querySelectorAll(".hf-remocn-matrix-decode");
+    var roots = document.querySelectorAll(".hf-catalog-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);
@@ -140,7 +140,7 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 <!--
   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);
+  tl.fromTo('.hf-catalog-matrix-decode span', { opacity: 0, y: 12 }, { opacity: 1, y: 0, duration: 0.18, stagger: 0.035, ease: 'power2.out' }, startTime);
 -->
 ```
 
@@ -181,7 +181,7 @@ defaults, so this behaves exactly like the preview above until you change one:
 
 ```html
 <!--
-  Matrix Decode - remocn typography primitive for HyperFrames.
+  Matrix Decode - 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.
@@ -207,7 +207,7 @@ defaults, so this behaves exactly like the preview above until you change one:
 -->
 
 <div
-  class="hf-remocn-matrix-decode"
+  class="hf-catalog-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" },
@@ -221,13 +221,13 @@ defaults, so this behaves exactly like the preview above until you change one:
 </div>
 
 <style>
-  .hf-remocn-matrix-decode {
+  .hf-catalog-matrix-decode {
     color: #18181b;
     font-family: Inter, system-ui, sans-serif;
     font-weight: 900;
     letter-spacing: -0.04em;
   }
-  .hf-remocn-matrix-decode {
+  .hf-catalog-matrix-decode {
     display: inline-flex;
     gap: 3px;
     font:
@@ -240,7 +240,7 @@ defaults, so this behaves exactly like the preview above until you change one:
     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 {
+  .hf-catalog-matrix-decode span {
     display: inline-block;
     min-width: 0.64em;
     opacity: var(--hf-matrix-opacity, 1);
@@ -284,7 +284,7 @@ defaults, so this behaves exactly like the preview above until you change one:
     var accent = accents[pick(accents, vars.accent, "green")];
     var glow = glows[pick(glows, vars.glow, "standard")];
 
-    var roots = document.querySelectorAll(".hf-remocn-matrix-decode");
+    var roots = document.querySelectorAll(".hf-catalog-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);
@@ -306,7 +306,7 @@ defaults, so this behaves exactly like the preview above until you change one:
 
 <!--
   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);
+  tl.fromTo('.hf-catalog-matrix-decode span', { opacity: 0, y: 12 }, { opacity: 1, y: 0, duration: 0.18, stagger: 0.035, ease: 'power2.out' }, startTime);
 -->
 ```
 
@@ -318,7 +318,7 @@ Open `compositions/components/matrix-decode.html` and paste its contents into yo
 
 {/* hf:generated-footer */}
 
-Tagged `motion-primitive` `remocn-port` `typography`.
+Tagged `motion-primitive` `typography`.
 
 ## Related topics
 
diff --git a/docs/catalog/components/mesh-gradient-bg.mdx b/docs/catalog/components/mesh-gradient-bg.mdx
index 39600489d4..b214a25bee 100644
--- a/docs/catalog/components/mesh-gradient-bg.mdx
+++ b/docs/catalog/components/mesh-gradient-bg.mdx
@@ -24,13 +24,13 @@ That writes one file: `compositions/components/mesh-gradient-bg.html`.
 
 ```html
 <!--
-  Mesh Gradient Background - remocn component ported to HyperFrames authoring format.
+  Mesh Gradient Background - catalog component for HyperFrames.
 
   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="hf-catalog-mesh-gradient-bg">
   <div class="mesh"></div>
   <div class="card">
     <div class="spot"></div>
@@ -42,7 +42,7 @@ That writes one file: `compositions/components/mesh-gradient-bg.html`.
 </div>
 
 <style>
-  .hf-remocn-mesh-gradient-bg {
+  .hf-catalog-mesh-gradient-bg {
     --hf-accent: #2563eb;
     --hf-ink: #111827;
     --hf-muted: #6b7280;
@@ -50,7 +50,7 @@ That writes one file: `compositions/components/mesh-gradient-bg.html`.
     color: var(--hf-ink);
     font-family: Inter, system-ui, sans-serif;
   }
-  .hf-remocn-mesh-gradient-bg {
+  .hf-catalog-mesh-gradient-bg {
     position: relative;
     width: 760px;
     height: 428px;
@@ -59,7 +59,7 @@ That writes one file: `compositions/components/mesh-gradient-bg.html`.
     background: #080b12;
     box-shadow: 0 28px 80px rgba(15, 23, 42, 0.2);
   }
-  .hf-remocn-mesh-gradient-bg .mesh {
+  .hf-catalog-mesh-gradient-bg .mesh {
     position: absolute;
     inset: -22%;
     filter: blur(44px);
@@ -77,7 +77,7 @@ That writes one file: `compositions/components/mesh-gradient-bg.html`.
       ),
       radial-gradient(circle at var(--hf-x3, 46%) var(--hf-y3, 78%), #34d399 0 18%, transparent 34%);
   }
-  .hf-remocn-mesh-gradient-bg .card {
+  .hf-catalog-mesh-gradient-bg .card {
     position: absolute;
     inset: 74px 92px;
     border: 1px solid rgba(255, 255, 255, 0.16);
@@ -89,7 +89,7 @@ That writes one file: `compositions/components/mesh-gradient-bg.html`.
     text-align: center;
     overflow: hidden;
   }
-  .hf-remocn-mesh-gradient-bg .spot {
+  .hf-catalog-mesh-gradient-bg .spot {
     position: absolute;
     width: 260px;
     height: 260px;
@@ -98,7 +98,7 @@ That writes one file: `compositions/components/mesh-gradient-bg.html`.
     transform: translate(var(--hf-spot-x, 0px), var(--hf-spot-y, 0px));
     mix-blend-mode: screen;
   }
-  .hf-remocn-mesh-gradient-bg .particle {
+  .hf-catalog-mesh-gradient-bg .particle {
     position: absolute;
     left: 50%;
     top: 54%;
@@ -109,12 +109,12 @@ That writes one file: `compositions/components/mesh-gradient-bg.html`.
     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 {
+  .hf-catalog-mesh-gradient-bg h3 {
     margin: 0;
     font-size: 44px;
     letter-spacing: -0.04em;
   }
-  .hf-remocn-mesh-gradient-bg p {
+  .hf-catalog-mesh-gradient-bg p {
     margin: 8px 0 0;
     color: rgba(255, 255, 255, 0.7);
   }
@@ -122,7 +122,7 @@ That writes one file: `compositions/components/mesh-gradient-bg.html`.
 
 <!--
   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); }
+  tl.fromTo('.hf-catalog-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-catalog-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-catalog-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); }
 -->
 ```
 
@@ -134,7 +134,7 @@ Open `compositions/components/mesh-gradient-bg.html` and paste its contents into
 
 {/* hf:generated-footer */}
 
-Tagged `effect` `remocn-port`.
+Tagged `effect`.
 
 ## Related topics
 
diff --git a/docs/catalog/components/onboarding-stepper-flow.mdx b/docs/catalog/components/onboarding-stepper-flow.mdx
index 098013d2b3..710287202e 100644
--- a/docs/catalog/components/onboarding-stepper-flow.mdx
+++ b/docs/catalog/components/onboarding-stepper-flow.mdx
@@ -24,7 +24,7 @@ That writes one file: `compositions/components/onboarding-stepper-flow.html`.
 
 ```html
 <!--
-  Onboarding Stepper Flow - Remocn-inspired composed UI flow for HyperFrames.
+  Onboarding Stepper Flow - 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.
@@ -125,7 +125,7 @@ Open `compositions/components/onboarding-stepper-flow.html` and paste its conten
 
 {/* hf:generated-footer */}
 
-Tagged `ui-flow` `remocn-port` `onboarding` `stepper`.
+Tagged `ui-flow` `onboarding` `stepper`.
 
 ## Related topics
 
diff --git a/docs/catalog/components/per-word-crossfade.mdx b/docs/catalog/components/per-word-crossfade.mdx
index 5b7dfd619f..98bf90d602 100644
--- a/docs/catalog/components/per-word-crossfade.mdx
+++ b/docs/catalog/components/per-word-crossfade.mdx
@@ -15,7 +15,7 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 ```html per-word-crossfade.html
 <!--
-  Per-Word Crossfade - remocn typography primitive for HyperFrames.
+  Per-Word Crossfade - 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.
@@ -41,7 +41,7 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 -->
 
 <div
-  class="hf-remocn-per-word-crossfade"
+  class="hf-catalog-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" }] },
@@ -53,19 +53,19 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 </div>
 
 <style>
-  .hf-remocn-per-word-crossfade {
+  .hf-catalog-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 {
+  .hf-catalog-per-word-crossfade {
     display: inline-flex;
     gap: 12px;
     font-size: 56px;
     line-height: 1;
   }
-  .hf-remocn-per-word-crossfade span {
+  .hf-catalog-per-word-crossfade span {
     display: inline-block;
     transform: translate(
         var(--hf-word-x, 0px),
@@ -106,7 +106,7 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
     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");
+    var roots = document.querySelectorAll(".hf-catalog-per-word-crossfade");
     for (var i = 0; i < roots.length; i += 1) {
       var root = roots[i];
       root.style.setProperty("--hf-word-drift", String(drift));
@@ -127,7 +127,7 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 <!--
   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);
+  tl.fromTo('.hf-catalog-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);
 -->
 ```
 
@@ -168,7 +168,7 @@ defaults, so this behaves exactly like the preview above until you change one:
 
 ```html
 <!--
-  Per-Word Crossfade - remocn typography primitive for HyperFrames.
+  Per-Word Crossfade - 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.
@@ -194,7 +194,7 @@ defaults, so this behaves exactly like the preview above until you change one:
 -->
 
 <div
-  class="hf-remocn-per-word-crossfade"
+  class="hf-catalog-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" }] },
@@ -206,19 +206,19 @@ defaults, so this behaves exactly like the preview above until you change one:
 </div>
 
 <style>
-  .hf-remocn-per-word-crossfade {
+  .hf-catalog-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 {
+  .hf-catalog-per-word-crossfade {
     display: inline-flex;
     gap: 12px;
     font-size: 56px;
     line-height: 1;
   }
-  .hf-remocn-per-word-crossfade span {
+  .hf-catalog-per-word-crossfade span {
     display: inline-block;
     transform: translate(
         var(--hf-word-x, 0px),
@@ -259,7 +259,7 @@ defaults, so this behaves exactly like the preview above until you change one:
     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");
+    var roots = document.querySelectorAll(".hf-catalog-per-word-crossfade");
     for (var i = 0; i < roots.length; i += 1) {
       var root = roots[i];
       root.style.setProperty("--hf-word-drift", String(drift));
@@ -280,7 +280,7 @@ defaults, so this behaves exactly like the preview above until you change one:
 
 <!--
   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);
+  tl.fromTo('.hf-catalog-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);
 -->
 ```
 
@@ -292,7 +292,7 @@ Open `compositions/components/per-word-crossfade.html` and paste its contents in
 
 {/* hf:generated-footer */}
 
-Tagged `motion-primitive` `remocn-port` `typography`.
+Tagged `motion-primitive` `typography`.
 
 ## Related topics
 
diff --git a/docs/catalog/components/perspective-marquee.mdx b/docs/catalog/components/perspective-marquee.mdx
index 78a1771e83..bb87e83691 100644
--- a/docs/catalog/components/perspective-marquee.mdx
+++ b/docs/catalog/components/perspective-marquee.mdx
@@ -15,7 +15,7 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 ```html perspective-marquee.html
 <!--
-  Perspective Marquee - remocn typography primitive for HyperFrames.
+  Perspective Marquee - 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.
@@ -44,7 +44,7 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 -->
 
 <div
-  class="hf-remocn-perspective-marquee"
+  class="hf-catalog-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" }] },
@@ -59,25 +59,25 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 </div>
 
 <style>
-  .hf-remocn-perspective-marquee {
+  .hf-catalog-perspective-marquee {
     color: #18181b;
     font-family: Inter, system-ui, sans-serif;
     font-weight: 900;
     letter-spacing: -0.04em;
   }
-  .hf-remocn-perspective-marquee {
+  .hf-catalog-perspective-marquee {
     width: 720px;
     perspective: 900px;
     overflow: hidden;
     transform: rotateX(var(--hf-marquee-tilt, 18deg));
   }
-  .hf-remocn-perspective-marquee div {
+  .hf-catalog-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 {
+  .hf-catalog-perspective-marquee span {
     padding: 12px 18px;
     border-radius: 999px;
     background: var(--hf-marquee-pill-bg, #18181b);
@@ -126,7 +126,7 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
     var tone = tones[pick(tones, vars.tone, "ink")];
     var words = parseWords(vars.words);
 
-    var roots = document.querySelectorAll(".hf-remocn-perspective-marquee");
+    var roots = document.querySelectorAll(".hf-catalog-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));
@@ -148,7 +148,7 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 <!--
   Timeline integration:
-  tl.fromTo('.hf-remocn-perspective-marquee div', { '--hf-marquee-x': '0px' }, { '--hf-marquee-x': '-360px', duration: 4.5, ease: 'none' }, startTime);
+  tl.fromTo('.hf-catalog-perspective-marquee div', { '--hf-marquee-x': '0px' }, { '--hf-marquee-x': '-360px', duration: 4.5, ease: 'none' }, startTime);
 -->
 ```
 
@@ -189,7 +189,7 @@ defaults, so this behaves exactly like the preview above until you change one:
 
 ```html
 <!--
-  Perspective Marquee - remocn typography primitive for HyperFrames.
+  Perspective Marquee - 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.
@@ -218,7 +218,7 @@ defaults, so this behaves exactly like the preview above until you change one:
 -->
 
 <div
-  class="hf-remocn-perspective-marquee"
+  class="hf-catalog-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" }] },
@@ -233,25 +233,25 @@ defaults, so this behaves exactly like the preview above until you change one:
 </div>
 
 <style>
-  .hf-remocn-perspective-marquee {
+  .hf-catalog-perspective-marquee {
     color: #18181b;
     font-family: Inter, system-ui, sans-serif;
     font-weight: 900;
     letter-spacing: -0.04em;
   }
-  .hf-remocn-perspective-marquee {
+  .hf-catalog-perspective-marquee {
     width: 720px;
     perspective: 900px;
     overflow: hidden;
     transform: rotateX(var(--hf-marquee-tilt, 18deg));
   }
-  .hf-remocn-perspective-marquee div {
+  .hf-catalog-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 {
+  .hf-catalog-perspective-marquee span {
     padding: 12px 18px;
     border-radius: 999px;
     background: var(--hf-marquee-pill-bg, #18181b);
@@ -300,7 +300,7 @@ defaults, so this behaves exactly like the preview above until you change one:
     var tone = tones[pick(tones, vars.tone, "ink")];
     var words = parseWords(vars.words);
 
-    var roots = document.querySelectorAll(".hf-remocn-perspective-marquee");
+    var roots = document.querySelectorAll(".hf-catalog-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));
@@ -322,7 +322,7 @@ defaults, so this behaves exactly like the preview above until you change one:
 
 <!--
   Timeline integration:
-  tl.fromTo('.hf-remocn-perspective-marquee div', { '--hf-marquee-x': '0px' }, { '--hf-marquee-x': '-360px', duration: 4.5, ease: 'none' }, startTime);
+  tl.fromTo('.hf-catalog-perspective-marquee div', { '--hf-marquee-x': '0px' }, { '--hf-marquee-x': '-360px', duration: 4.5, ease: 'none' }, startTime);
 -->
 ```
 
@@ -334,7 +334,7 @@ Open `compositions/components/perspective-marquee.html` and paste its contents i
 
 {/* hf:generated-footer */}
 
-Tagged `motion-primitive` `remocn-port` `typography`.
+Tagged `motion-primitive` `typography`.
 
 ## Related topics
 
diff --git a/docs/catalog/components/rgb-glitch-text.mdx b/docs/catalog/components/rgb-glitch-text.mdx
index a76916d98c..d34fa01b3f 100644
--- a/docs/catalog/components/rgb-glitch-text.mdx
+++ b/docs/catalog/components/rgb-glitch-text.mdx
@@ -15,7 +15,7 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 ```html rgb-glitch-text.html
 <!--
-  RGB Glitch Text - remocn typography primitive for HyperFrames.
+  RGB Glitch Text - 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.
@@ -40,7 +40,7 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 -->
 
 <div
-  class="hf-remocn-rgb-glitch-text"
+  class="hf-catalog-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" }] },
@@ -51,33 +51,33 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 </div>
 
 <style>
-  .hf-remocn-rgb-glitch-text {
+  .hf-catalog-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 {
+  .hf-catalog-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 {
+  .hf-catalog-rgb-glitch-text span,
+  .hf-catalog-rgb-glitch-text strong {
     position: absolute;
     inset: 0;
   }
-  .hf-remocn-rgb-glitch-text span:first-child {
+  .hf-catalog-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) {
+  .hf-catalog-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 {
+  .hf-catalog-rgb-glitch-text strong {
     color: var(--hf-glitch-ink, #18181b);
   }
 </style>
@@ -108,7 +108,7 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
     var text =
       typeof vars.text === "string" && vars.text.trim() !== "" ? vars.text.trim() : "GLITCH";
 
-    var roots = document.querySelectorAll(".hf-remocn-rgb-glitch-text");
+    var roots = document.querySelectorAll(".hf-catalog-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);
@@ -122,7 +122,7 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 <!--
   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);
+  tl.to('.hf-catalog-rgb-glitch-text', { opacity: 1, duration: 0.01 }, startTime); tl.to('.hf-catalog-rgb-glitch-text', { '--hf-glitch-red': '-8px', '--hf-glitch-blue': '8px', duration: 0.06, repeat: 5, yoyo: true, ease: 'steps(1)' }, startTime + 0.1);
 -->
 ```
 
@@ -162,7 +162,7 @@ defaults, so this behaves exactly like the preview above until you change one:
 
 ```html
 <!--
-  RGB Glitch Text - remocn typography primitive for HyperFrames.
+  RGB Glitch Text - 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.
@@ -187,7 +187,7 @@ defaults, so this behaves exactly like the preview above until you change one:
 -->
 
 <div
-  class="hf-remocn-rgb-glitch-text"
+  class="hf-catalog-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" }] },
@@ -198,33 +198,33 @@ defaults, so this behaves exactly like the preview above until you change one:
 </div>
 
 <style>
-  .hf-remocn-rgb-glitch-text {
+  .hf-catalog-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 {
+  .hf-catalog-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 {
+  .hf-catalog-rgb-glitch-text span,
+  .hf-catalog-rgb-glitch-text strong {
     position: absolute;
     inset: 0;
   }
-  .hf-remocn-rgb-glitch-text span:first-child {
+  .hf-catalog-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) {
+  .hf-catalog-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 {
+  .hf-catalog-rgb-glitch-text strong {
     color: var(--hf-glitch-ink, #18181b);
   }
 </style>
@@ -255,7 +255,7 @@ defaults, so this behaves exactly like the preview above until you change one:
     var text =
       typeof vars.text === "string" && vars.text.trim() !== "" ? vars.text.trim() : "GLITCH";
 
-    var roots = document.querySelectorAll(".hf-remocn-rgb-glitch-text");
+    var roots = document.querySelectorAll(".hf-catalog-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);
@@ -269,7 +269,7 @@ defaults, so this behaves exactly like the preview above until you change one:
 
 <!--
   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);
+  tl.to('.hf-catalog-rgb-glitch-text', { opacity: 1, duration: 0.01 }, startTime); tl.to('.hf-catalog-rgb-glitch-text', { '--hf-glitch-red': '-8px', '--hf-glitch-blue': '8px', duration: 0.06, repeat: 5, yoyo: true, ease: 'steps(1)' }, startTime + 0.1);
 -->
 ```
 
@@ -281,7 +281,7 @@ Open `compositions/components/rgb-glitch-text.html` and paste its contents into
 
 {/* hf:generated-footer */}
 
-Tagged `motion-primitive` `remocn-port` `typography`.
+Tagged `motion-primitive` `typography`.
 
 ## Related topics
 
diff --git a/docs/catalog/components/separator.mdx b/docs/catalog/components/separator.mdx
index 07d104fc65..5e971e1077 100644
--- a/docs/catalog/components/separator.mdx
+++ b/docs/catalog/components/separator.mdx
@@ -541,7 +541,7 @@ defaults, so this behaves exactly like the preview above until you change one:
 
 {/* hf:generated-footer */}
 
-Tagged `video-primitive` `remocn-port` `separator` `layout`.
+Tagged `video-primitive` `separator` `layout`.
 
 ## Related topics
 
diff --git a/docs/catalog/components/settings-toggle-flow.mdx b/docs/catalog/components/settings-toggle-flow.mdx
index d7b2cf1168..2134f041d4 100644
--- a/docs/catalog/components/settings-toggle-flow.mdx
+++ b/docs/catalog/components/settings-toggle-flow.mdx
@@ -24,7 +24,7 @@ That writes one file: `compositions/components/settings-toggle-flow.html`.
 
 ```html
 <!--
-  Settings Toggle Flow - Remocn-inspired composed UI flow for HyperFrames.
+  Settings Toggle Flow - 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.
@@ -121,7 +121,7 @@ Open `compositions/components/settings-toggle-flow.html` and paste its contents
 
 {/* hf:generated-footer */}
 
-Tagged `ui-flow` `remocn-port` `settings` `toggle`.
+Tagged `ui-flow` `settings` `toggle`.
 
 ## Related topics
 
diff --git a/docs/catalog/components/shared-axis-y.mdx b/docs/catalog/components/shared-axis-y.mdx
index d25f9f40fe..51ebf98801 100644
--- a/docs/catalog/components/shared-axis-y.mdx
+++ b/docs/catalog/components/shared-axis-y.mdx
@@ -15,7 +15,7 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 ```html shared-axis-y.html
 <!--
-  Shared Axis Y - remocn typography primitive for HyperFrames.
+  Shared Axis Y - 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.
@@ -39,7 +39,7 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 -->
 
 <div
-  class="hf-remocn-shared-axis-y"
+  class="hf-catalog-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" }] },
@@ -50,19 +50,19 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 </div>
 
 <style>
-  .hf-remocn-shared-axis-y {
+  .hf-catalog-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 {
+  .hf-catalog-shared-axis-y {
     display: inline-flex;
     gap: 12px;
     font-size: 56px;
     line-height: 1;
   }
-  .hf-remocn-shared-axis-y span {
+  .hf-catalog-shared-axis-y span {
     display: inline-block;
     transform: translate(
         var(--hf-word-x, 0px),
@@ -100,7 +100,7 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
     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");
+    var roots = document.querySelectorAll(".hf-catalog-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);
@@ -110,7 +110,7 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 <!--
   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);
+  tl.fromTo('.hf-catalog-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);
 -->
 ```
 
@@ -150,7 +150,7 @@ defaults, so this behaves exactly like the preview above until you change one:
 
 ```html
 <!--
-  Shared Axis Y - remocn typography primitive for HyperFrames.
+  Shared Axis Y - 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.
@@ -174,7 +174,7 @@ defaults, so this behaves exactly like the preview above until you change one:
 -->
 
 <div
-  class="hf-remocn-shared-axis-y"
+  class="hf-catalog-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" }] },
@@ -185,19 +185,19 @@ defaults, so this behaves exactly like the preview above until you change one:
 </div>
 
 <style>
-  .hf-remocn-shared-axis-y {
+  .hf-catalog-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 {
+  .hf-catalog-shared-axis-y {
     display: inline-flex;
     gap: 12px;
     font-size: 56px;
     line-height: 1;
   }
-  .hf-remocn-shared-axis-y span {
+  .hf-catalog-shared-axis-y span {
     display: inline-block;
     transform: translate(
         var(--hf-word-x, 0px),
@@ -235,7 +235,7 @@ defaults, so this behaves exactly like the preview above until you change one:
     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");
+    var roots = document.querySelectorAll(".hf-catalog-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);
@@ -245,7 +245,7 @@ defaults, so this behaves exactly like the preview above until you change one:
 
 <!--
   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);
+  tl.fromTo('.hf-catalog-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);
 -->
 ```
 
@@ -257,7 +257,7 @@ Open `compositions/components/shared-axis-y.html` and paste its contents into yo
 
 {/* hf:generated-footer */}
 
-Tagged `motion-primitive` `remocn-port` `typography`.
+Tagged `motion-primitive` `typography`.
 
 ## Related topics
 
diff --git a/docs/catalog/components/shared-axis-z.mdx b/docs/catalog/components/shared-axis-z.mdx
index 27fe07f556..47c992bed8 100644
--- a/docs/catalog/components/shared-axis-z.mdx
+++ b/docs/catalog/components/shared-axis-z.mdx
@@ -15,7 +15,7 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 ```html shared-axis-z.html
 <!--
-  Shared Axis Z - remocn typography primitive for HyperFrames.
+  Shared Axis Z - 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.
@@ -41,7 +41,7 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 -->
 
 <div
-  class="hf-remocn-shared-axis-z"
+  class="hf-catalog-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" }] },
@@ -52,19 +52,19 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 </div>
 
 <style>
-  .hf-remocn-shared-axis-z {
+  .hf-catalog-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 {
+  .hf-catalog-shared-axis-z {
     display: inline-flex;
     gap: 12px;
     font-size: 56px;
     line-height: 1;
   }
-  .hf-remocn-shared-axis-z span {
+  .hf-catalog-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)));
@@ -99,7 +99,7 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
     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");
+    var roots = document.querySelectorAll(".hf-catalog-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);
@@ -109,7 +109,7 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 <!--
   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);
+  tl.fromTo('.hf-catalog-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);
 -->
 ```
 
@@ -149,7 +149,7 @@ defaults, so this behaves exactly like the preview above until you change one:
 
 ```html
 <!--
-  Shared Axis Z - remocn typography primitive for HyperFrames.
+  Shared Axis Z - 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.
@@ -175,7 +175,7 @@ defaults, so this behaves exactly like the preview above until you change one:
 -->
 
 <div
-  class="hf-remocn-shared-axis-z"
+  class="hf-catalog-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" }] },
@@ -186,19 +186,19 @@ defaults, so this behaves exactly like the preview above until you change one:
 </div>
 
 <style>
-  .hf-remocn-shared-axis-z {
+  .hf-catalog-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 {
+  .hf-catalog-shared-axis-z {
     display: inline-flex;
     gap: 12px;
     font-size: 56px;
     line-height: 1;
   }
-  .hf-remocn-shared-axis-z span {
+  .hf-catalog-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)));
@@ -233,7 +233,7 @@ defaults, so this behaves exactly like the preview above until you change one:
     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");
+    var roots = document.querySelectorAll(".hf-catalog-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);
@@ -243,7 +243,7 @@ defaults, so this behaves exactly like the preview above until you change one:
 
 <!--
   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);
+  tl.fromTo('.hf-catalog-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);
 -->
 ```
 
@@ -255,7 +255,7 @@ Open `compositions/components/shared-axis-z.html` and paste its contents into yo
 
 {/* hf:generated-footer */}
 
-Tagged `motion-primitive` `remocn-port` `typography`.
+Tagged `motion-primitive` `typography`.
 
 ## Related topics
 
diff --git a/docs/catalog/components/signup-flow.mdx b/docs/catalog/components/signup-flow.mdx
index 0c4c34f9c9..4339b417ef 100644
--- a/docs/catalog/components/signup-flow.mdx
+++ b/docs/catalog/components/signup-flow.mdx
@@ -24,7 +24,7 @@ That writes one file: `compositions/components/signup-flow.html`.
 
 ```html
 <!--
-  Signup Flow - Remocn-inspired composed UI flow for HyperFrames.
+  Signup Flow - 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.
@@ -113,7 +113,7 @@ Open `compositions/components/signup-flow.html` and paste its contents into your
 
 {/* hf:generated-footer */}
 
-Tagged `ui-flow` `remocn-port` `signup` `form`.
+Tagged `ui-flow` `signup` `form`.
 
 ## Related topics
 
diff --git a/docs/catalog/components/slot-machine-roll.mdx b/docs/catalog/components/slot-machine-roll.mdx
index 14521630bf..3a9c229762 100644
--- a/docs/catalog/components/slot-machine-roll.mdx
+++ b/docs/catalog/components/slot-machine-roll.mdx
@@ -15,7 +15,7 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 ```html slot-machine-roll.html
 <!--
-  Slot Machine Roll - remocn typography primitive for HyperFrames.
+  Slot Machine Roll - 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.
@@ -43,7 +43,7 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 -->
 
 <div
-  class="hf-remocn-slot-machine-roll"
+  class="hf-catalog-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" }] },
@@ -61,13 +61,13 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 </div>
 
 <style>
-  .hf-remocn-slot-machine-roll {
+  .hf-catalog-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 {
+  .hf-catalog-slot-machine-roll {
     display: inline-flex;
     gap: 6px;
     height: var(--hf-slot-row, 74px);
@@ -78,12 +78,12 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
       Menlo,
       monospace;
   }
-  .hf-remocn-slot-machine-roll span {
+  .hf-catalog-slot-machine-roll span {
     display: block;
     height: var(--hf-slot-row, 74px);
     overflow: hidden;
   }
-  .hf-remocn-slot-machine-roll i {
+  .hf-catalog-slot-machine-roll i {
     display: block;
     font-style: normal;
     transform: translateY(
@@ -123,7 +123,7 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
     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");
+    var roots = document.querySelectorAll(".hf-catalog-slot-machine-roll");
     for (var i = 0; i < roots.length; i += 1) {
       var root = roots[i];
       root.style.setProperty("--hf-slot-row", row + "px");
@@ -148,7 +148,7 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 <!--
   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);
+  tl.fromTo('.hf-catalog-slot-machine-roll i', { '--hf-slot-y': '0px' }, { '--hf-slot-y': '-74px', duration: 0.52, stagger: 0.06, ease: 'power3.inOut' }, startTime);
 -->
 ```
 
@@ -189,7 +189,7 @@ defaults, so this behaves exactly like the preview above until you change one:
 
 ```html
 <!--
-  Slot Machine Roll - remocn typography primitive for HyperFrames.
+  Slot Machine Roll - 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.
@@ -217,7 +217,7 @@ defaults, so this behaves exactly like the preview above until you change one:
 -->
 
 <div
-  class="hf-remocn-slot-machine-roll"
+  class="hf-catalog-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" }] },
@@ -235,13 +235,13 @@ defaults, so this behaves exactly like the preview above until you change one:
 </div>
 
 <style>
-  .hf-remocn-slot-machine-roll {
+  .hf-catalog-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 {
+  .hf-catalog-slot-machine-roll {
     display: inline-flex;
     gap: 6px;
     height: var(--hf-slot-row, 74px);
@@ -252,12 +252,12 @@ defaults, so this behaves exactly like the preview above until you change one:
       Menlo,
       monospace;
   }
-  .hf-remocn-slot-machine-roll span {
+  .hf-catalog-slot-machine-roll span {
     display: block;
     height: var(--hf-slot-row, 74px);
     overflow: hidden;
   }
-  .hf-remocn-slot-machine-roll i {
+  .hf-catalog-slot-machine-roll i {
     display: block;
     font-style: normal;
     transform: translateY(
@@ -297,7 +297,7 @@ defaults, so this behaves exactly like the preview above until you change one:
     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");
+    var roots = document.querySelectorAll(".hf-catalog-slot-machine-roll");
     for (var i = 0; i < roots.length; i += 1) {
       var root = roots[i];
       root.style.setProperty("--hf-slot-row", row + "px");
@@ -322,7 +322,7 @@ defaults, so this behaves exactly like the preview above until you change one:
 
 <!--
   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);
+  tl.fromTo('.hf-catalog-slot-machine-roll i', { '--hf-slot-y': '0px' }, { '--hf-slot-y': '-74px', duration: 0.52, stagger: 0.06, ease: 'power3.inOut' }, startTime);
 -->
 ```
 
@@ -334,7 +334,7 @@ Open `compositions/components/slot-machine-roll.html` and paste its contents int
 
 {/* hf:generated-footer */}
 
-Tagged `video-primitive` `motion-primitive` `remocn-port` `typography`.
+Tagged `video-primitive` `motion-primitive` `typography`.
 
 ## Related topics
 
diff --git a/docs/catalog/components/spotlight-card.mdx b/docs/catalog/components/spotlight-card.mdx
index 7c100e2128..3d0b17e147 100644
--- a/docs/catalog/components/spotlight-card.mdx
+++ b/docs/catalog/components/spotlight-card.mdx
@@ -24,13 +24,13 @@ That writes one file: `compositions/components/spotlight-card.html`.
 
 ```html
 <!--
-  Spotlight Card - remocn component ported to HyperFrames authoring format.
+  Spotlight Card - catalog component for HyperFrames.
 
   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="hf-catalog-spotlight-card">
   <div class="mesh"></div>
   <div class="card">
     <div class="spot"></div>
@@ -42,7 +42,7 @@ That writes one file: `compositions/components/spotlight-card.html`.
 </div>
 
 <style>
-  .hf-remocn-spotlight-card {
+  .hf-catalog-spotlight-card {
     --hf-accent: var(--accent, #18181b);
     --hf-ink: #111827;
     --hf-muted: #6b7280;
@@ -50,7 +50,7 @@ That writes one file: `compositions/components/spotlight-card.html`.
     color: var(--hf-ink);
     font-family: Inter, system-ui, sans-serif;
   }
-  .hf-remocn-spotlight-card {
+  .hf-catalog-spotlight-card {
     position: relative;
     width: 760px;
     height: 428px;
@@ -59,7 +59,7 @@ That writes one file: `compositions/components/spotlight-card.html`.
     background: #080b12;
     box-shadow: 0 28px 80px rgba(15, 23, 42, 0.2);
   }
-  .hf-remocn-spotlight-card .mesh {
+  .hf-catalog-spotlight-card .mesh {
     position: absolute;
     inset: -22%;
     filter: blur(44px);
@@ -81,7 +81,7 @@ That writes one file: `compositions/components/spotlight-card.html`.
         transparent 34%
       );
   }
-  .hf-remocn-spotlight-card .card {
+  .hf-catalog-spotlight-card .card {
     position: absolute;
     inset: 74px 92px;
     border: 1px solid rgba(255, 255, 255, 0.16);
@@ -93,7 +93,7 @@ That writes one file: `compositions/components/spotlight-card.html`.
     text-align: center;
     overflow: hidden;
   }
-  .hf-remocn-spotlight-card .spot {
+  .hf-catalog-spotlight-card .spot {
     position: absolute;
     width: 260px;
     height: 260px;
@@ -102,7 +102,7 @@ That writes one file: `compositions/components/spotlight-card.html`.
     transform: translate(var(--hf-spot-x, 0px), var(--hf-spot-y, 0px));
     mix-blend-mode: screen;
   }
-  .hf-remocn-spotlight-card .particle {
+  .hf-catalog-spotlight-card .particle {
     position: absolute;
     left: 50%;
     top: 54%;
@@ -113,12 +113,12 @@ That writes one file: `compositions/components/spotlight-card.html`.
     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 {
+  .hf-catalog-spotlight-card h3 {
     margin: 0;
     font-size: 44px;
     letter-spacing: -0.04em;
   }
-  .hf-remocn-spotlight-card p {
+  .hf-catalog-spotlight-card p {
     margin: 8px 0 0;
     color: rgba(255, 255, 255, 0.7);
   }
@@ -126,7 +126,7 @@ That writes one file: `compositions/components/spotlight-card.html`.
 
 <!--
   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); }
+  tl.fromTo('.hf-catalog-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-catalog-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-catalog-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); }
 -->
 ```
 
@@ -138,7 +138,7 @@ Open `compositions/components/spotlight-card.html` and paste its contents into y
 
 {/* hf:generated-footer */}
 
-Tagged `effect` `remocn-port`.
+Tagged `effect`.
 
 ## Related topics
 
diff --git a/docs/catalog/components/staggered-fade-up.mdx b/docs/catalog/components/staggered-fade-up.mdx
index 67da62e3b2..2ab41a05c6 100644
--- a/docs/catalog/components/staggered-fade-up.mdx
+++ b/docs/catalog/components/staggered-fade-up.mdx
@@ -15,7 +15,7 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 ```html staggered-fade-up.html
 <!--
-  Staggered Fade Up - remocn typography primitive for HyperFrames.
+  Staggered Fade Up - 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.
@@ -44,7 +44,7 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 -->
 
 <div
-  class="hf-remocn-staggered-fade-up"
+  class="hf-catalog-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" }] },
@@ -56,19 +56,19 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 </div>
 
 <style>
-  .hf-remocn-staggered-fade-up {
+  .hf-catalog-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 {
+  .hf-catalog-staggered-fade-up {
     display: inline-flex;
     gap: var(--space-1, 12px);
     font-size: 56px;
     line-height: 1;
   }
-  .hf-remocn-staggered-fade-up span {
+  .hf-catalog-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)),
@@ -113,7 +113,7 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
     var words =
       typeof vars.words === "string" && vars.words.trim() ? vars.words.trim().split(/\s+/) : null;
 
-    var roots = document.querySelectorAll(".hf-remocn-staggered-fade-up");
+    var roots = document.querySelectorAll(".hf-catalog-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));
@@ -132,7 +132,7 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 <!--
   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);
+  tl.fromTo('.hf-catalog-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);
 -->
 ```
 
@@ -173,7 +173,7 @@ defaults, so this behaves exactly like the preview above until you change one:
 
 ```html
 <!--
-  Staggered Fade Up - remocn typography primitive for HyperFrames.
+  Staggered Fade Up - 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.
@@ -202,7 +202,7 @@ defaults, so this behaves exactly like the preview above until you change one:
 -->
 
 <div
-  class="hf-remocn-staggered-fade-up"
+  class="hf-catalog-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" }] },
@@ -214,19 +214,19 @@ defaults, so this behaves exactly like the preview above until you change one:
 </div>
 
 <style>
-  .hf-remocn-staggered-fade-up {
+  .hf-catalog-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 {
+  .hf-catalog-staggered-fade-up {
     display: inline-flex;
     gap: var(--space-1, 12px);
     font-size: 56px;
     line-height: 1;
   }
-  .hf-remocn-staggered-fade-up span {
+  .hf-catalog-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)),
@@ -271,7 +271,7 @@ defaults, so this behaves exactly like the preview above until you change one:
     var words =
       typeof vars.words === "string" && vars.words.trim() ? vars.words.trim().split(/\s+/) : null;
 
-    var roots = document.querySelectorAll(".hf-remocn-staggered-fade-up");
+    var roots = document.querySelectorAll(".hf-catalog-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));
@@ -290,7 +290,7 @@ defaults, so this behaves exactly like the preview above until you change one:
 
 <!--
   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);
+  tl.fromTo('.hf-catalog-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);
 -->
 ```
 
@@ -302,7 +302,7 @@ Open `compositions/components/staggered-fade-up.html` and paste its contents int
 
 {/* hf:generated-footer */}
 
-Tagged `video-primitive` `motion-primitive` `remocn-port` `typography`.
+Tagged `video-primitive` `motion-primitive` `typography`.
 
 ## Related topics
 
diff --git a/docs/catalog/components/strikethrough-replace.mdx b/docs/catalog/components/strikethrough-replace.mdx
index 6dd93d824e..d0bf73e9b8 100644
--- a/docs/catalog/components/strikethrough-replace.mdx
+++ b/docs/catalog/components/strikethrough-replace.mdx
@@ -15,7 +15,7 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 ```html strikethrough-replace.html
 <!--
-  Strikethrough Replace - remocn typography primitive for HyperFrames.
+  Strikethrough Replace - 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.
@@ -43,7 +43,7 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 -->
 
 <div
-  class="hf-remocn-strikethrough-replace"
+  class="hf-catalog-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" }] },
@@ -55,13 +55,13 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 </div>
 
 <style>
-  .hf-remocn-strikethrough-replace {
+  .hf-catalog-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 {
+  .hf-catalog-strikethrough-replace {
     position: relative;
     display: inline-grid;
     grid-auto-flow: column;
@@ -69,7 +69,7 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
     align-items: center;
     font-size: 58px;
   }
-  .hf-remocn-strikethrough-replace i {
+  .hf-catalog-strikethrough-replace i {
     position: absolute;
     left: 0;
     width: 48%;
@@ -79,7 +79,7 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
     transform: scaleX(var(--hf-strike-progress, 1));
     transform-origin: var(--hf-strike-origin, left center);
   }
-  .hf-remocn-strikethrough-replace strong {
+  .hf-catalog-strikethrough-replace strong {
     opacity: var(--hf-replace-opacity, 1);
   }
 </style>
@@ -113,7 +113,7 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
     var tint = tints[pick(tints, vars.tint, "red")];
     var tone = tones[pick(tones, vars.tone, "ink")];
 
-    var roots = document.querySelectorAll(".hf-remocn-strikethrough-replace");
+    var roots = document.querySelectorAll(".hf-catalog-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);
@@ -125,7 +125,7 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 <!--
   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);
+  tl.fromTo('.hf-catalog-strikethrough-replace i', { '--hf-strike-progress': 0 }, { '--hf-strike-progress': 1, duration: 0.28, ease: 'power2.out' }, startTime); tl.fromTo('.hf-catalog-strikethrough-replace strong', { '--hf-replace-opacity': 0, y: 14 }, { '--hf-replace-opacity': 1, y: 0, duration: 0.3, ease: 'power2.out' }, startTime + 0.24);
 -->
 ```
 
@@ -166,7 +166,7 @@ defaults, so this behaves exactly like the preview above until you change one:
 
 ```html
 <!--
-  Strikethrough Replace - remocn typography primitive for HyperFrames.
+  Strikethrough Replace - 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.
@@ -194,7 +194,7 @@ defaults, so this behaves exactly like the preview above until you change one:
 -->
 
 <div
-  class="hf-remocn-strikethrough-replace"
+  class="hf-catalog-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" }] },
@@ -206,13 +206,13 @@ defaults, so this behaves exactly like the preview above until you change one:
 </div>
 
 <style>
-  .hf-remocn-strikethrough-replace {
+  .hf-catalog-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 {
+  .hf-catalog-strikethrough-replace {
     position: relative;
     display: inline-grid;
     grid-auto-flow: column;
@@ -220,7 +220,7 @@ defaults, so this behaves exactly like the preview above until you change one:
     align-items: center;
     font-size: 58px;
   }
-  .hf-remocn-strikethrough-replace i {
+  .hf-catalog-strikethrough-replace i {
     position: absolute;
     left: 0;
     width: 48%;
@@ -230,7 +230,7 @@ defaults, so this behaves exactly like the preview above until you change one:
     transform: scaleX(var(--hf-strike-progress, 1));
     transform-origin: var(--hf-strike-origin, left center);
   }
-  .hf-remocn-strikethrough-replace strong {
+  .hf-catalog-strikethrough-replace strong {
     opacity: var(--hf-replace-opacity, 1);
   }
 </style>
@@ -264,7 +264,7 @@ defaults, so this behaves exactly like the preview above until you change one:
     var tint = tints[pick(tints, vars.tint, "red")];
     var tone = tones[pick(tones, vars.tone, "ink")];
 
-    var roots = document.querySelectorAll(".hf-remocn-strikethrough-replace");
+    var roots = document.querySelectorAll(".hf-catalog-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);
@@ -276,7 +276,7 @@ defaults, so this behaves exactly like the preview above until you change one:
 
 <!--
   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);
+  tl.fromTo('.hf-catalog-strikethrough-replace i', { '--hf-strike-progress': 0 }, { '--hf-strike-progress': 1, duration: 0.28, ease: 'power2.out' }, startTime); tl.fromTo('.hf-catalog-strikethrough-replace strong', { '--hf-replace-opacity': 0, y: 14 }, { '--hf-replace-opacity': 1, y: 0, duration: 0.3, ease: 'power2.out' }, startTime + 0.24);
 -->
 ```
 
@@ -288,7 +288,7 @@ Open `compositions/components/strikethrough-replace.html` and paste its contents
 
 {/* hf:generated-footer */}
 
-Tagged `motion-primitive` `remocn-port` `typography`.
+Tagged `motion-primitive` `typography`.
 
 ## Related topics
 
diff --git a/docs/catalog/components/terminal-simulator.mdx b/docs/catalog/components/terminal-simulator.mdx
index 2fc1572f8d..8287d5d6a2 100644
--- a/docs/catalog/components/terminal-simulator.mdx
+++ b/docs/catalog/components/terminal-simulator.mdx
@@ -24,13 +24,13 @@ That writes one file: `compositions/components/terminal-simulator.html`.
 
 ```html
 <!--
-  Terminal Simulator - remocn component ported to HyperFrames authoring format.
+  Terminal Simulator - catalog component for HyperFrames.
 
   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="hf-catalog-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>
@@ -44,7 +44,7 @@ That writes one file: `compositions/components/terminal-simulator.html`.
 </div>
 
 <style>
-  .hf-remocn-terminal-simulator {
+  .hf-catalog-terminal-simulator {
     --hf-accent: var(--accent, #18181b);
     --hf-ink: #111827;
     --hf-muted: #6b7280;
@@ -52,7 +52,7 @@ That writes one file: `compositions/components/terminal-simulator.html`.
     color: var(--hf-ink);
     font-family: Inter, system-ui, sans-serif;
   }
-  .hf-remocn-terminal-simulator {
+  .hf-catalog-terminal-simulator {
     width: 760px;
     border-radius: 24px;
     overflow: hidden;
@@ -61,7 +61,7 @@ That writes one file: `compositions/components/terminal-simulator.html`.
     box-shadow: 0 28px 80px rgba(15, 23, 42, 0.2);
     font-family: ui-monospace, Menlo, monospace;
   }
-  .hf-remocn-terminal-simulator .chrome {
+  .hf-catalog-terminal-simulator .chrome {
     height: 48px;
     display: flex;
     align-items: center;
@@ -70,7 +70,7 @@ That writes one file: `compositions/components/terminal-simulator.html`.
     background: #111827;
     color: #94a3b8;
   }
-  .hf-remocn-terminal-simulator .dot {
+  .hf-catalog-terminal-simulator .dot {
     width: 11px;
     height: 11px;
     border-radius: 999px;
@@ -79,22 +79,22 @@ That writes one file: `compositions/components/terminal-simulator.html`.
       18px 0 #f59e0b,
       36px 0 #22c55e;
   }
-  .hf-remocn-terminal-simulator .body {
+  .hf-catalog-terminal-simulator .body {
     display: grid;
     grid-template-columns: 210px 1fr;
     min-height: 340px;
   }
-  .hf-remocn-terminal-simulator .files {
+  .hf-catalog-terminal-simulator .files {
     padding: 22px;
     border-right: 1px solid rgba(148, 163, 184, 0.18);
     color: #94a3b8;
   }
-  .hf-remocn-terminal-simulator .editor {
+  .hf-catalog-terminal-simulator .editor {
     padding: 22px;
     display: grid;
     gap: 12px;
   }
-  .hf-remocn-terminal-simulator .line {
+  .hf-catalog-terminal-simulator .line {
     display: block;
     height: 16px;
     border-radius: 999px;
@@ -103,7 +103,7 @@ That writes one file: `compositions/components/terminal-simulator.html`.
     transform-origin: left center;
     opacity: var(--hf-line-opacity, 1);
   }
-  .hf-remocn-terminal-simulator .terminal {
+  .hf-catalog-terminal-simulator .terminal {
     padding: 18px 22px 24px;
     border-top: 1px solid rgba(148, 163, 184, 0.18);
     color: #86efac;
@@ -113,7 +113,7 @@ That writes one file: `compositions/components/terminal-simulator.html`.
 
 <!--
   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);
+  tl.fromTo('.hf-catalog-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-catalog-terminal-simulator .terminal', { opacity: 0, y: 16 }, { opacity: 1, y: 0, duration: 0.34, ease: 'power2.out' }, startTime + 0.48);
 -->
 ```
 
@@ -125,7 +125,7 @@ Open `compositions/components/terminal-simulator.html` and paste its contents in
 
 {/* hf:generated-footer */}
 
-Tagged `code-animation` `remocn-port`.
+Tagged `code-animation`.
 
 ## Related topics
 
diff --git a/docs/catalog/components/top-down-letters.mdx b/docs/catalog/components/top-down-letters.mdx
index 6a77fd84e7..1f92b88983 100644
--- a/docs/catalog/components/top-down-letters.mdx
+++ b/docs/catalog/components/top-down-letters.mdx
@@ -15,7 +15,7 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 ```html top-down-letters.html
 <!--
-  Top-Down Letters - remocn typography primitive for HyperFrames.
+  Top-Down Letters - 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.
@@ -44,7 +44,7 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 -->
 
 <div
-  class="hf-remocn-top-down-letters"
+  class="hf-catalog-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" }] },
@@ -55,20 +55,20 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 </div>
 
 <style>
-  .hf-remocn-top-down-letters {
+  .hf-catalog-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 {
+  .hf-catalog-top-down-letters {
     display: inline-flex;
     gap: 1px;
     font-size: 74px;
     line-height: 0.9;
     overflow: hidden;
   }
-  .hf-remocn-top-down-letters span {
+  .hf-catalog-top-down-letters span {
     display: inline-block;
     transform: translateY(calc(var(--hf-char-y, 0px) * var(--hf-char-distance, 1)));
     will-change: transform, opacity;
@@ -100,7 +100,7 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
     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");
+    var roots = document.querySelectorAll(".hf-catalog-top-down-letters");
     for (var i = 0; i < roots.length; i += 1) {
       var root = roots[i];
       root.style.setProperty("--hf-char-distance", String(distance));
@@ -124,7 +124,7 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 <!--
   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);
+  tl.fromTo('.hf-catalog-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);
 -->
 ```
 
@@ -164,7 +164,7 @@ defaults, so this behaves exactly like the preview above until you change one:
 
 ```html
 <!--
-  Top-Down Letters - remocn typography primitive for HyperFrames.
+  Top-Down Letters - 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.
@@ -193,7 +193,7 @@ defaults, so this behaves exactly like the preview above until you change one:
 -->
 
 <div
-  class="hf-remocn-top-down-letters"
+  class="hf-catalog-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" }] },
@@ -204,20 +204,20 @@ defaults, so this behaves exactly like the preview above until you change one:
 </div>
 
 <style>
-  .hf-remocn-top-down-letters {
+  .hf-catalog-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 {
+  .hf-catalog-top-down-letters {
     display: inline-flex;
     gap: 1px;
     font-size: 74px;
     line-height: 0.9;
     overflow: hidden;
   }
-  .hf-remocn-top-down-letters span {
+  .hf-catalog-top-down-letters span {
     display: inline-block;
     transform: translateY(calc(var(--hf-char-y, 0px) * var(--hf-char-distance, 1)));
     will-change: transform, opacity;
@@ -249,7 +249,7 @@ defaults, so this behaves exactly like the preview above until you change one:
     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");
+    var roots = document.querySelectorAll(".hf-catalog-top-down-letters");
     for (var i = 0; i < roots.length; i += 1) {
       var root = roots[i];
       root.style.setProperty("--hf-char-distance", String(distance));
@@ -273,7 +273,7 @@ defaults, so this behaves exactly like the preview above until you change one:
 
 <!--
   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);
+  tl.fromTo('.hf-catalog-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);
 -->
 ```
 
@@ -285,7 +285,7 @@ Open `compositions/components/top-down-letters.html` and paste its contents into
 
 {/* hf:generated-footer */}
 
-Tagged `video-primitive` `motion-primitive` `remocn-port` `typography`.
+Tagged `video-primitive` `motion-primitive` `typography`.
 
 ## Related topics
 
diff --git a/docs/catalog/components/typewriter.mdx b/docs/catalog/components/typewriter.mdx
index 9653671409..41dc6ccdf3 100644
--- a/docs/catalog/components/typewriter.mdx
+++ b/docs/catalog/components/typewriter.mdx
@@ -15,7 +15,7 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 ```html typewriter.html
 <!--
-  Typewriter - remocn typography primitive for HyperFrames.
+  Typewriter - 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.
@@ -44,7 +44,7 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 -->
 
 <div
-  class="hf-remocn-typewriter"
+  class="hf-catalog-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" }] },
@@ -55,13 +55,13 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 </div>
 
 <style>
-  .hf-remocn-typewriter {
+  .hf-catalog-typewriter {
     color: var(--hf-type-color, #18181b);
     font-family: Inter, system-ui, sans-serif;
     font-weight: 900;
     letter-spacing: -0.04em;
   }
-  .hf-remocn-typewriter {
+  .hf-catalog-typewriter {
     display: inline-flex;
     align-items: center;
     gap: 4px;
@@ -71,13 +71,13 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
       Menlo,
       monospace;
   }
-  .hf-remocn-typewriter span {
+  .hf-catalog-typewriter span {
     display: inline-block;
     max-width: calc(var(--hf-type-progress, 1) * 100%);
     overflow: hidden;
     white-space: nowrap;
   }
-  .hf-remocn-typewriter i {
+  .hf-catalog-typewriter i {
     display: var(--hf-caret-display, block);
     width: var(--hf-caret-width, 3px);
     height: 42px;
@@ -116,7 +116,7 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
     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");
+    var roots = document.querySelectorAll(".hf-catalog-typewriter");
     for (var i = 0; i < roots.length; i += 1) {
       var root = roots[i];
       root.style.setProperty("--hf-type-color", tone);
@@ -133,7 +133,7 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 <!--
   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);
+  tl.fromTo('.hf-catalog-typewriter', { '--hf-type-progress': 0 }, { '--hf-type-progress': 1, duration: 1.2, ease: 'steps(28)' }, startTime); tl.to('.hf-catalog-typewriter i', { '--hf-caret-opacity': 0.2, duration: 0.24, repeat: 7, yoyo: true, ease: 'none' }, startTime + 0.2);
 -->
 ```
 
@@ -173,7 +173,7 @@ defaults, so this behaves exactly like the preview above until you change one:
 
 ```html
 <!--
-  Typewriter - remocn typography primitive for HyperFrames.
+  Typewriter - 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.
@@ -202,7 +202,7 @@ defaults, so this behaves exactly like the preview above until you change one:
 -->
 
 <div
-  class="hf-remocn-typewriter"
+  class="hf-catalog-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" }] },
@@ -213,13 +213,13 @@ defaults, so this behaves exactly like the preview above until you change one:
 </div>
 
 <style>
-  .hf-remocn-typewriter {
+  .hf-catalog-typewriter {
     color: var(--hf-type-color, #18181b);
     font-family: Inter, system-ui, sans-serif;
     font-weight: 900;
     letter-spacing: -0.04em;
   }
-  .hf-remocn-typewriter {
+  .hf-catalog-typewriter {
     display: inline-flex;
     align-items: center;
     gap: 4px;
@@ -229,13 +229,13 @@ defaults, so this behaves exactly like the preview above until you change one:
       Menlo,
       monospace;
   }
-  .hf-remocn-typewriter span {
+  .hf-catalog-typewriter span {
     display: inline-block;
     max-width: calc(var(--hf-type-progress, 1) * 100%);
     overflow: hidden;
     white-space: nowrap;
   }
-  .hf-remocn-typewriter i {
+  .hf-catalog-typewriter i {
     display: var(--hf-caret-display, block);
     width: var(--hf-caret-width, 3px);
     height: 42px;
@@ -274,7 +274,7 @@ defaults, so this behaves exactly like the preview above until you change one:
     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");
+    var roots = document.querySelectorAll(".hf-catalog-typewriter");
     for (var i = 0; i < roots.length; i += 1) {
       var root = roots[i];
       root.style.setProperty("--hf-type-color", tone);
@@ -291,7 +291,7 @@ defaults, so this behaves exactly like the preview above until you change one:
 
 <!--
   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);
+  tl.fromTo('.hf-catalog-typewriter', { '--hf-type-progress': 0 }, { '--hf-type-progress': 1, duration: 1.2, ease: 'steps(28)' }, startTime); tl.to('.hf-catalog-typewriter i', { '--hf-caret-opacity': 0.2, duration: 0.24, repeat: 7, yoyo: true, ease: 'none' }, startTime + 0.2);
 -->
 ```
 
@@ -303,7 +303,7 @@ Open `compositions/components/typewriter.html` and paste its contents into your
 
 {/* hf:generated-footer */}
 
-Tagged `video-primitive` `motion-primitive` `remocn-port` `typography`.
+Tagged `video-primitive` `motion-primitive` `typography`.
 
 ## Related topics
 
diff --git a/docs/catalog/components/x-follow-card.mdx b/docs/catalog/components/x-follow-card.mdx
index 185af0ea30..3466a9155f 100644
--- a/docs/catalog/components/x-follow-card.mdx
+++ b/docs/catalog/components/x-follow-card.mdx
@@ -24,13 +24,13 @@ That writes one file: `compositions/components/x-follow-card.html`.
 
 ```html
 <!--
-  X Follow Card - remocn component ported to HyperFrames authoring format.
+  X Follow Card - catalog component for HyperFrames.
 
   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">
+<div class="hf-catalog-x-follow-card">
   <header>
     <div class="avatar"></div>
     <div>
@@ -47,7 +47,7 @@ That writes one file: `compositions/components/x-follow-card.html`.
 </div>
 
 <style>
-  .hf-remocn-x-follow-card {
+  .hf-catalog-x-follow-card {
     --hf-accent: var(--accent, #f8fafc);
     --hf-ink: #111827;
     --hf-l1: rgba(255, 255, 255, 0.72);
@@ -57,7 +57,7 @@ That writes one file: `compositions/components/x-follow-card.html`.
     color: var(--hf-ink);
     font-family: Inter, system-ui, sans-serif;
   }
-  .hf-remocn-x-follow-card {
+  .hf-catalog-x-follow-card {
     width: 700px;
     border-radius: 30px;
     padding: 34px;
@@ -65,38 +65,38 @@ That writes one file: `compositions/components/x-follow-card.html`.
     color: #fff;
     box-shadow: 0 28px 80px rgba(15, 23, 42, 0.2);
   }
-  .hf-remocn-x-follow-card header {
+  .hf-catalog-x-follow-card header {
     display: flex;
     align-items: center;
     gap: 16px;
   }
-  .hf-remocn-x-follow-card .avatar {
+  .hf-catalog-x-follow-card .avatar {
     width: 70px;
     height: 70px;
     border-radius: 22px;
     background: var(--hf-l1);
   }
-  .hf-remocn-x-follow-card h3 {
+  .hf-catalog-x-follow-card h3 {
     margin: 0;
     font-size: 36px;
     letter-spacing: -0.04em;
   }
-  .hf-remocn-x-follow-card p {
+  .hf-catalog-x-follow-card p {
     color: #94a3b8;
     margin: 4px 0 0;
   }
-  .hf-remocn-x-follow-card .stat {
+  .hf-catalog-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 {
+  .hf-catalog-x-follow-card .avatars {
     display: flex;
     margin-top: 18px;
   }
-  .hf-remocn-x-follow-card .avatars span {
+  .hf-catalog-x-follow-card .avatars span {
     width: 46px;
     height: 46px;
     border-radius: 999px;
@@ -110,7 +110,7 @@ That writes one file: `compositions/components/x-follow-card.html`.
 
 <!--
   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);
+  tl.fromTo('.hf-catalog-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-catalog-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);
 -->
 ```
 
@@ -122,7 +122,7 @@ Open `compositions/components/x-follow-card.html` and paste its contents into yo
 
 {/* hf:generated-footer */}
 
-Tagged `social-overlay` `remocn-port`.
+Tagged `social-overlay`.
 
 ## Related topics
 
diff --git a/docs/catalog/components/zoom-through-transition.mdx b/docs/catalog/components/zoom-through-transition.mdx
index dcea6d1267..3514181ab2 100644
--- a/docs/catalog/components/zoom-through-transition.mdx
+++ b/docs/catalog/components/zoom-through-transition.mdx
@@ -81,7 +81,7 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
             background: #111827;
           }
 
-          .hf-remocn-zoom-through-transition {
+          .hf-catalog-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);
@@ -93,13 +93,13 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
             color: var(--hf-ink);
             font-family: Inter, system-ui, sans-serif;
           }
-          .hf-remocn-zoom-through-transition {
+          .hf-catalog-zoom-through-transition {
             position: absolute;
             inset: 0;
             overflow: hidden;
             background: #111827;
           }
-          .hf-remocn-zoom-through-transition .scene {
+          .hf-catalog-zoom-through-transition .scene {
             position: absolute;
             inset: 0;
             display: grid;
@@ -109,7 +109,7 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
             letter-spacing: -0.05em;
             color: #fff;
           }
-          .hf-remocn-zoom-through-transition .from {
+          .hf-catalog-zoom-through-transition .from {
             background:
               repeating-linear-gradient(
                 90deg,
@@ -124,7 +124,7 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
               scale(var(--hf-from-scale, 1));
             filter: blur(calc(var(--hf-from-blur, 0px) * var(--hf-depth, 1)));
           }
-          .hf-remocn-zoom-through-transition .to {
+          .hf-catalog-zoom-through-transition .to {
             background:
               repeating-linear-gradient(
                 90deg,
@@ -143,14 +143,14 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
                 var(--hf-clip-left, 0%)
             );
           }
-          .hf-remocn-zoom-through-transition .fx {
+          .hf-catalog-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 {
+          .hf-catalog-zoom-through-transition .rgb {
             position: absolute;
             inset: 0;
             pointer-events: none;
@@ -165,7 +165,7 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
           }
         </style>
 
-        <div class="hf-remocn-zoom-through-transition">
+        <div class="hf-catalog-zoom-through-transition">
           >
           <div class="scene from">Before</div>
           <div class="scene to">Zoom Through Transition</div>
@@ -207,7 +207,7 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
             var fromLabel = label(vars["from-label"]);
             var toLabel = label(vars["to-label"]);
 
-            var roots = document.querySelectorAll(".hf-remocn-zoom-through-transition");
+            var roots = document.querySelectorAll(".hf-catalog-zoom-through-transition");
             var mountRoot = document.getElementById("root");
             for (var i = 0; i < roots.length; i += 1) {
               var root = roots[i];
@@ -230,7 +230,7 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
             // 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 SELF = ".hf-catalog-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.
@@ -403,7 +403,7 @@ defaults, so this behaves exactly like the preview above until you change one:
             background: #111827;
           }
 
-          .hf-remocn-zoom-through-transition {
+          .hf-catalog-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);
@@ -415,13 +415,13 @@ defaults, so this behaves exactly like the preview above until you change one:
             color: var(--hf-ink);
             font-family: Inter, system-ui, sans-serif;
           }
-          .hf-remocn-zoom-through-transition {
+          .hf-catalog-zoom-through-transition {
             position: absolute;
             inset: 0;
             overflow: hidden;
             background: #111827;
           }
-          .hf-remocn-zoom-through-transition .scene {
+          .hf-catalog-zoom-through-transition .scene {
             position: absolute;
             inset: 0;
             display: grid;
@@ -431,7 +431,7 @@ defaults, so this behaves exactly like the preview above until you change one:
             letter-spacing: -0.05em;
             color: #fff;
           }
-          .hf-remocn-zoom-through-transition .from {
+          .hf-catalog-zoom-through-transition .from {
             background:
               repeating-linear-gradient(
                 90deg,
@@ -446,7 +446,7 @@ defaults, so this behaves exactly like the preview above until you change one:
               scale(var(--hf-from-scale, 1));
             filter: blur(calc(var(--hf-from-blur, 0px) * var(--hf-depth, 1)));
           }
-          .hf-remocn-zoom-through-transition .to {
+          .hf-catalog-zoom-through-transition .to {
             background:
               repeating-linear-gradient(
                 90deg,
@@ -465,14 +465,14 @@ defaults, so this behaves exactly like the preview above until you change one:
                 var(--hf-clip-left, 0%)
             );
           }
-          .hf-remocn-zoom-through-transition .fx {
+          .hf-catalog-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 {
+          .hf-catalog-zoom-through-transition .rgb {
             position: absolute;
             inset: 0;
             pointer-events: none;
@@ -487,7 +487,7 @@ defaults, so this behaves exactly like the preview above until you change one:
           }
         </style>
 
-        <div class="hf-remocn-zoom-through-transition">
+        <div class="hf-catalog-zoom-through-transition">
           >
           <div class="scene from">Before</div>
           <div class="scene to">Zoom Through Transition</div>
@@ -529,7 +529,7 @@ defaults, so this behaves exactly like the preview above until you change one:
             var fromLabel = label(vars["from-label"]);
             var toLabel = label(vars["to-label"]);
 
-            var roots = document.querySelectorAll(".hf-remocn-zoom-through-transition");
+            var roots = document.querySelectorAll(".hf-catalog-zoom-through-transition");
             var mountRoot = document.getElementById("root");
             for (var i = 0; i < roots.length; i += 1) {
               var root = roots[i];
@@ -552,7 +552,7 @@ defaults, so this behaves exactly like the preview above until you change one:
             // 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 SELF = ".hf-catalog-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.
@@ -630,7 +630,7 @@ Open `compositions/components/zoom-through-transition.html` and paste its conten
 
 {/* hf:generated-footer */}
 
-Tagged `transition-primitive` `remocn-port`.
+Tagged `transition-primitive`.
 
 ## Related topics
 
diff --git a/docs/public/catalog-index.json b/docs/public/catalog-index.json
index 24a956eeae..d9a9d89d21 100644
--- a/docs/public/catalog-index.json
+++ b/docs/public/catalog-index.json
@@ -22,7 +22,6 @@
     "description": "A prompt composer expands into a generated dashboard preview.",
     "tags": [
       "showcase",
-      "remocn-port",
       "ai"
     ],
     "href": "/catalog/components/ai-generation-canvas",
@@ -35,7 +34,6 @@
     "description": "A composed AI prompt flow with prompt field, suggestion chips, generate action, and preview result card",
     "tags": [
       "ui-flow",
-      "remocn-port",
       "ai",
       "prompt"
     ],
@@ -48,8 +46,7 @@
     "title": "Animated Bar Chart",
     "description": "A compact data card with deterministic bar growth and value callouts.",
     "tags": [
-      "data",
-      "remocn-port"
+      "data"
     ],
     "href": "/catalog/components/animated-bar-chart",
     "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/animated-bar-chart.png"
@@ -302,7 +299,6 @@
     "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"
     ],
@@ -316,7 +312,6 @@
     "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",
@@ -783,7 +778,6 @@
     "description": "A composed checkout flow with plan summary, payment field rows, total, and purchase action",
     "tags": [
       "ui-flow",
-      "remocn-port",
       "checkout",
       "commerce"
     ],
@@ -797,8 +791,7 @@
     "description": "A fast slide wipe with RGB channel split on peak frames.",
     "tags": [
       "video-primitive",
-      "transition-primitive",
-      "remocn-port"
+      "transition-primitive"
     ],
     "href": "/catalog/components/chromatic-aberration-wipe",
     "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/chromatic-aberration-wipe.png"
@@ -1371,8 +1364,7 @@
     "title": "Confetti",
     "description": "A deterministic celebration burst with seeded particles and gravity.",
     "tags": [
-      "effect",
-      "remocn-port"
+      "effect"
     ],
     "href": "/catalog/components/confetti",
     "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/confetti.png"
@@ -1567,8 +1559,7 @@
     "title": "Directional Wipe",
     "description": "A directional scene push that slides one panel over another.",
     "tags": [
-      "transition-primitive",
-      "remocn-port"
+      "transition-primitive"
     ],
     "href": "/catalog/components/directional-wipe",
     "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/directional-wipe.png"
@@ -1725,7 +1716,6 @@
     "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",
@@ -2310,7 +2300,6 @@
     "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",
@@ -2716,7 +2705,6 @@
     "description": "Random scramble resolves left-to-right into the target text.",
     "tags": [
       "motion-primitive",
-      "remocn-port",
       "typography"
     ],
     "href": "/catalog/components/matrix-decode",
@@ -2743,8 +2731,7 @@
     "title": "Mesh Gradient Background",
     "description": "A render-safe mesh gradient using animated radial layers.",
     "tags": [
-      "effect",
-      "remocn-port"
+      "effect"
     ],
     "href": "/catalog/components/mesh-gradient-bg",
     "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/mesh-gradient-bg.png"
@@ -3190,7 +3177,6 @@
     "description": "A composed onboarding flow with milestone rail, active step card, and next-action button",
     "tags": [
       "ui-flow",
-      "remocn-port",
       "onboarding",
       "stepper"
     ],
@@ -3421,7 +3407,6 @@
     "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",
@@ -3449,7 +3434,6 @@
     "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",
@@ -3587,7 +3571,6 @@
     "description": "RGB-offset text copies jitter briefly for a controlled glitch window.",
     "tags": [
       "motion-primitive",
-      "remocn-port",
       "typography"
     ],
     "href": "/catalog/components/rgb-glitch-text",
@@ -3748,7 +3731,6 @@
     "description": "A one-pixel structural separator with horizontal and vertical variants plus a seek-safe progress reveal",
     "tags": [
       "video-primitive",
-      "remocn-port",
       "separator",
       "layout"
     ],
@@ -3762,7 +3744,6 @@
     "description": "A composed settings flow with preference rows, toggle switches, and active-state feedback",
     "tags": [
       "ui-flow",
-      "remocn-port",
       "settings",
       "toggle"
     ],
@@ -3791,7 +3772,6 @@
     "description": "Per-word vertical shared-axis transition for sharp editorial swaps.",
     "tags": [
       "motion-primitive",
-      "remocn-port",
       "typography"
     ],
     "href": "/catalog/components/shared-axis-y",
@@ -3804,7 +3784,6 @@
     "description": "Scale-based shared-axis transition for focus shifts and context depth.",
     "tags": [
       "motion-primitive",
-      "remocn-port",
       "typography"
     ],
     "href": "/catalog/components/shared-axis-z",
@@ -3846,7 +3825,6 @@
     "description": "A composed signup flow with social action, email field, password field, and submit button",
     "tags": [
       "ui-flow",
-      "remocn-port",
       "signup",
       "form"
     ],
@@ -3907,7 +3885,6 @@
     "tags": [
       "video-primitive",
       "motion-primitive",
-      "remocn-port",
       "typography"
     ],
     "href": "/catalog/components/slot-machine-roll",
@@ -4042,8 +4019,7 @@
     "title": "Spotlight Card",
     "description": "A card with a scripted cursor spotlight and lit border.",
     "tags": [
-      "effect",
-      "remocn-port"
+      "effect"
     ],
     "href": "/catalog/components/spotlight-card",
     "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/spotlight-card.png"
@@ -4115,7 +4091,6 @@
     "tags": [
       "video-primitive",
       "motion-primitive",
-      "remocn-port",
       "typography"
     ],
     "href": "/catalog/components/staggered-fade-up",
@@ -4239,7 +4214,6 @@
     "description": "Draw a strike line across old text, then reveal the replacement.",
     "tags": [
       "motion-primitive",
-      "remocn-port",
       "typography"
     ],
     "href": "/catalog/components/strikethrough-replace",
@@ -4369,8 +4343,7 @@
     "title": "Terminal Simulator",
     "description": "A terminal window types commands and streams log output.",
     "tags": [
-      "code-animation",
-      "remocn-port"
+      "code-animation"
     ],
     "href": "/catalog/components/terminal-simulator",
     "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/terminal-simulator.png"
@@ -4605,7 +4578,6 @@
     "tags": [
       "video-primitive",
       "motion-primitive",
-      "remocn-port",
       "typography"
     ],
     "href": "/catalog/components/top-down-letters",
@@ -4865,7 +4837,6 @@
     "tags": [
       "video-primitive",
       "motion-primitive",
-      "remocn-port",
       "typography"
     ],
     "href": "/catalog/components/typewriter",
@@ -5293,8 +5264,7 @@
     "title": "X Follow Card",
     "description": "A social follow card with avatar, handle, and follower motion.",
     "tags": [
-      "social-overlay",
-      "remocn-port"
+      "social-overlay"
     ],
     "href": "/catalog/components/x-follow-card",
     "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/x-follow-card.png"
@@ -5451,8 +5421,7 @@
     "title": "Zoom Through Transition",
     "description": "A transition that zooms through a focal card into the next scene.",
     "tags": [
-      "transition-primitive",
-      "remocn-port"
+      "transition-primitive"
     ],
     "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/components/ai-generation-canvas.json b/docs/public/catalog/components/ai-generation-canvas.json
index 8553521ca0..70952fbf79 100644
--- a/docs/public/catalog/components/ai-generation-canvas.json
+++ b/docs/public/catalog/components/ai-generation-canvas.json
@@ -1 +1 @@
-{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=1920, height=1080\" />\n    <title>AI Generation Canvas - Demo</title>\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      * {\n        box-sizing: border-box;\n      }\n      html,\n      body {\n        margin: 0;\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n      }\n      #demo {\n        width: 1920px;\n        height: 1080px;\n        display: grid;\n        place-items: center;\n        background: #f7f7f8;\n        font-family: Inter, system-ui, sans-serif;\n      }\n      .demo-frame {\n        display: grid;\n        place-items: center;\n        padding: 52px;\n        /* ponytail: scale on wrapper (not GSAP target) to fill ~65% of 1920×1080 */\n        transform: scale(1.52);\n      }\n      .hf-remocn-ai-generation-canvas {\n        --hf-accent: var(--accent, #18181b);\n        --hf-ink: #111827;\n        --hf-muted: #6b7280;\n        --hf-surface: #ffffff;\n        color: var(--hf-ink);\n        font-family: Inter, system-ui, sans-serif;\n      }\n      .hf-remocn-ai-generation-canvas {\n        width: 820px;\n        min-height: 460px;\n        border-radius: 34px;\n        padding: 28px;\n        background: linear-gradient(135deg, #fafafa, #e4e4e7);\n        box-shadow: 0 28px 80px rgba(15, 23, 42, 0.18);\n        display: grid;\n        grid-template-columns: 280px 1fr;\n        gap: 22px;\n        overflow: hidden;\n      }\n      .hf-remocn-ai-generation-canvas .panel {\n        border: 1px solid rgba(15, 23, 42, 0.08);\n        border-radius: 24px;\n        background: rgba(255, 255, 255, 0.76);\n        padding: 22px;\n        backdrop-filter: blur(12px);\n      }\n      .hf-remocn-ai-generation-canvas .prompt {\n        display: grid;\n        gap: 12px;\n        align-content: start;\n      }\n      .hf-remocn-ai-generation-canvas .pill {\n        height: 42px;\n        border-radius: 999px;\n        background: #111827;\n        color: #fff;\n        display: flex;\n        align-items: center;\n        padding: 0 18px;\n        font-weight: 800;\n        transform: translateX(var(--hf-pill-x, 0px));\n      }\n      .hf-remocn-ai-generation-canvas .preview {\n        display: grid;\n        gap: 14px;\n      }\n      .hf-remocn-ai-generation-canvas .card {\n        min-height: 78px;\n        border-radius: 18px;\n        background: #fff;\n        box-shadow: 0 14px 40px rgba(15, 23, 42, 0.08);\n        transform: translate(var(--hf-card-x, 0px), var(--hf-card-y, 0px))\n          scale(var(--hf-card-scale, 1));\n        opacity: var(--hf-card-opacity, 1);\n        padding: 16px 18px;\n        display: flex;\n        flex-direction: column;\n        gap: 10px;\n      }\n      /* skeleton bars that make the dashboard cards readable as a thumbnail */\n      .hf-remocn-ai-generation-canvas .card-label {\n        height: 10px;\n        border-radius: 6px;\n        background: #e4e4e7;\n        width: 55%;\n      }\n      .hf-remocn-ai-generation-canvas .card-bar {\n        height: 8px;\n        border-radius: 6px;\n        background: #f4f4f5;\n        width: 85%;\n      }\n      .hf-remocn-ai-generation-canvas .card-bar.short {\n        width: 60%;\n      }\n      .hf-remocn-ai-generation-canvas .card-accent {\n        height: 28px;\n        border-radius: 8px;\n        background: #d4d4d8;\n        width: 100%;\n        margin-top: 2px;\n      }\n      .hf-remocn-ai-generation-canvas h3 {\n        margin: 0 0 14px;\n        font-size: 32px;\n        letter-spacing: -0.04em;\n      }\n      .hf-remocn-ai-generation-canvas p {\n        margin: 0;\n        color: #71717a;\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"demo\"\n      data-composition-id=\"ai-generation-canvas-demo\"\n      data-start=\"0\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n      data-duration=\"5\"\n    >\n      <div class=\"demo-frame\">\n        <div class=\"hf-remocn-ai-generation-canvas\">\n          <div class=\"panel prompt\">\n            <h3>AI Generation Canvas</h3>\n            <p>A prompt composer expands into a generated dashboard preview.</p>\n            <div class=\"pill\">Generate scene</div>\n            <div class=\"pill\">Refine motion</div>\n            <div class=\"pill\">Export</div>\n          </div>\n          <div class=\"panel preview\">\n            <div class=\"card\">\n              <div class=\"card-label\"></div>\n              <div class=\"card-accent\"></div>\n            </div>\n            <div class=\"card\">\n              <div class=\"card-label\"></div>\n              <div class=\"card-bar\"></div>\n              <div class=\"card-bar short\"></div>\n            </div>\n            <div class=\"card\">\n              <div class=\"card-label\"></div>\n              <div class=\"card-bar\"></div>\n              <div class=\"card-bar short\"></div>\n            </div>\n          </div>\n        </div>\n      </div>\n      <script>\n        const tl = gsap.timeline({ paused: true });\n        const startTime = 0.5;\n        tl.fromTo(\n          \".hf-remocn-ai-generation-canvas .pill\",\n          { \"--hf-pill-x\": \"-18px\", opacity: 0 },\n          { \"--hf-pill-x\": \"0px\", opacity: 1, duration: 0.25, stagger: 0.08, ease: \"power2.out\" },\n          startTime,\n        );\n        tl.fromTo(\n          \".hf-remocn-ai-generation-canvas .card\",\n          { \"--hf-card-y\": \"28px\", \"--hf-card-scale\": 0.96, \"--hf-card-opacity\": 0 },\n          {\n            \"--hf-card-y\": \"0px\",\n            \"--hf-card-scale\": 1,\n            \"--hf-card-opacity\": 1,\n            duration: 0.42,\n            stagger: 0.12,\n            ease: \"power3.out\",\n          },\n          startTime + 0.2,\n        );\n        tl.set({}, {}, 5);\n        window.__timelines = window.__timelines || {};\n        window.__timelines[\"ai-generation-canvas-demo\"] = tl;\n      </script>\n    </div>\n  </body>\n</html>\n"}
\ No newline at end of file
+{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=1920, height=1080\" />\n    <title>AI Generation Canvas - Demo</title>\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      * {\n        box-sizing: border-box;\n      }\n      html,\n      body {\n        margin: 0;\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n      }\n      #demo {\n        width: 1920px;\n        height: 1080px;\n        display: grid;\n        place-items: center;\n        background: #f7f7f8;\n        font-family: Inter, system-ui, sans-serif;\n      }\n      .demo-frame {\n        display: grid;\n        place-items: center;\n        padding: 52px;\n        /* ponytail: scale on wrapper (not GSAP target) to fill ~65% of 1920×1080 */\n        transform: scale(1.52);\n      }\n      .hf-catalog-ai-generation-canvas {\n        --hf-accent: var(--accent, #18181b);\n        --hf-ink: #111827;\n        --hf-muted: #6b7280;\n        --hf-surface: #ffffff;\n        color: var(--hf-ink);\n        font-family: Inter, system-ui, sans-serif;\n      }\n      .hf-catalog-ai-generation-canvas {\n        width: 820px;\n        min-height: 460px;\n        border-radius: 34px;\n        padding: 28px;\n        background: linear-gradient(135deg, #fafafa, #e4e4e7);\n        box-shadow: 0 28px 80px rgba(15, 23, 42, 0.18);\n        display: grid;\n        grid-template-columns: 280px 1fr;\n        gap: 22px;\n        overflow: hidden;\n      }\n      .hf-catalog-ai-generation-canvas .panel {\n        border: 1px solid rgba(15, 23, 42, 0.08);\n        border-radius: 24px;\n        background: rgba(255, 255, 255, 0.76);\n        padding: 22px;\n        backdrop-filter: blur(12px);\n      }\n      .hf-catalog-ai-generation-canvas .prompt {\n        display: grid;\n        gap: 12px;\n        align-content: start;\n      }\n      .hf-catalog-ai-generation-canvas .pill {\n        height: 42px;\n        border-radius: 999px;\n        background: #111827;\n        color: #fff;\n        display: flex;\n        align-items: center;\n        padding: 0 18px;\n        font-weight: 800;\n        transform: translateX(var(--hf-pill-x, 0px));\n      }\n      .hf-catalog-ai-generation-canvas .preview {\n        display: grid;\n        gap: 14px;\n      }\n      .hf-catalog-ai-generation-canvas .card {\n        min-height: 78px;\n        border-radius: 18px;\n        background: #fff;\n        box-shadow: 0 14px 40px rgba(15, 23, 42, 0.08);\n        transform: translate(var(--hf-card-x, 0px), var(--hf-card-y, 0px))\n          scale(var(--hf-card-scale, 1));\n        opacity: var(--hf-card-opacity, 1);\n        padding: 16px 18px;\n        display: flex;\n        flex-direction: column;\n        gap: 10px;\n      }\n      /* skeleton bars that make the dashboard cards readable as a thumbnail */\n      .hf-catalog-ai-generation-canvas .card-label {\n        height: 10px;\n        border-radius: 6px;\n        background: #e4e4e7;\n        width: 55%;\n      }\n      .hf-catalog-ai-generation-canvas .card-bar {\n        height: 8px;\n        border-radius: 6px;\n        background: #f4f4f5;\n        width: 85%;\n      }\n      .hf-catalog-ai-generation-canvas .card-bar.short {\n        width: 60%;\n      }\n      .hf-catalog-ai-generation-canvas .card-accent {\n        height: 28px;\n        border-radius: 8px;\n        background: #d4d4d8;\n        width: 100%;\n        margin-top: 2px;\n      }\n      .hf-catalog-ai-generation-canvas h3 {\n        margin: 0 0 14px;\n        font-size: 32px;\n        letter-spacing: -0.04em;\n      }\n      .hf-catalog-ai-generation-canvas p {\n        margin: 0;\n        color: #71717a;\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"demo\"\n      data-composition-id=\"ai-generation-canvas-demo\"\n      data-start=\"0\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n      data-duration=\"5\"\n    >\n      <div class=\"demo-frame\">\n        <div class=\"hf-catalog-ai-generation-canvas\">\n          <div class=\"panel prompt\">\n            <h3>AI Generation Canvas</h3>\n            <p>A prompt composer expands into a generated dashboard preview.</p>\n            <div class=\"pill\">Generate scene</div>\n            <div class=\"pill\">Refine motion</div>\n            <div class=\"pill\">Export</div>\n          </div>\n          <div class=\"panel preview\">\n            <div class=\"card\">\n              <div class=\"card-label\"></div>\n              <div class=\"card-accent\"></div>\n            </div>\n            <div class=\"card\">\n              <div class=\"card-label\"></div>\n              <div class=\"card-bar\"></div>\n              <div class=\"card-bar short\"></div>\n            </div>\n            <div class=\"card\">\n              <div class=\"card-label\"></div>\n              <div class=\"card-bar\"></div>\n              <div class=\"card-bar short\"></div>\n            </div>\n          </div>\n        </div>\n      </div>\n      <script>\n        const tl = gsap.timeline({ paused: true });\n        const startTime = 0.5;\n        tl.fromTo(\n          \".hf-catalog-ai-generation-canvas .pill\",\n          { \"--hf-pill-x\": \"-18px\", opacity: 0 },\n          { \"--hf-pill-x\": \"0px\", opacity: 1, duration: 0.25, stagger: 0.08, ease: \"power2.out\" },\n          startTime,\n        );\n        tl.fromTo(\n          \".hf-catalog-ai-generation-canvas .card\",\n          { \"--hf-card-y\": \"28px\", \"--hf-card-scale\": 0.96, \"--hf-card-opacity\": 0 },\n          {\n            \"--hf-card-y\": \"0px\",\n            \"--hf-card-scale\": 1,\n            \"--hf-card-opacity\": 1,\n            duration: 0.42,\n            stagger: 0.12,\n            ease: \"power3.out\",\n          },\n          startTime + 0.2,\n        );\n        tl.set({}, {}, 5);\n        window.__timelines = window.__timelines || {};\n        window.__timelines[\"ai-generation-canvas-demo\"] = tl;\n      </script>\n    </div>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/docs/public/catalog/components/animated-bar-chart.json b/docs/public/catalog/components/animated-bar-chart.json
index d89caaec69..8a15576fd4 100644
--- a/docs/public/catalog/components/animated-bar-chart.json
+++ b/docs/public/catalog/components/animated-bar-chart.json
@@ -1 +1 @@
-{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=1920, height=1080\" />\n    <title>Animated Bar Chart - Demo</title>\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      * {\n        box-sizing: border-box;\n      }\n      html,\n      body {\n        margin: 0;\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n      }\n      #demo {\n        width: 1920px;\n        height: 1080px;\n        display: grid;\n        place-items: center;\n        background: #f7f7f8;\n        font-family: Inter, system-ui, sans-serif;\n      }\n      .demo-frame {\n        display: grid;\n        place-items: center;\n        padding: 52px;\n        transform: scale(1.6);\n        transform-origin: center center;\n      }\n      .hf-remocn-animated-bar-chart {\n        --hf-accent: var(--accent, #111827);\n        --hf-ink: #111827;\n        --hf-l1: rgba(17, 24, 39, 0.72);\n        --hf-l2: rgba(17, 24, 39, 0.45);\n        --hf-l3: rgba(17, 24, 39, 0.18);\n        --hf-l4: rgba(17, 24, 39, 0.08);\n        --hf-hair: rgba(17, 24, 39, 0.14);\n        --hf-muted: #6b7280;\n        --hf-surface: #ffffff;\n        color: var(--hf-ink);\n        font-family: Inter, system-ui, sans-serif;\n      }\n      .hf-remocn-animated-bar-chart {\n        width: 760px;\n        min-height: 420px;\n        border-radius: 28px;\n        background: #fff;\n        padding: 34px;\n        box-shadow: 0 28px 80px rgba(15, 23, 42, 0.16);\n        display: grid;\n        gap: 22px;\n      }\n      .hf-remocn-animated-bar-chart header {\n        display: flex;\n        justify-content: space-between;\n        align-items: end;\n      }\n      .hf-remocn-animated-bar-chart h3 {\n        margin: 0;\n        font-size: 34px;\n        letter-spacing: -0.04em;\n        font-weight: 700;\n        color: #111827;\n      }\n      .hf-remocn-animated-bar-chart header p {\n        margin: 6px 0 0;\n        font-size: 16px;\n        color: #6b7280;\n        font-weight: 400;\n      }\n      .hf-remocn-animated-bar-chart strong {\n        font-size: 54px;\n        letter-spacing: -0.06em;\n        color: var(--hf-accent);\n        font-weight: 700;\n      }\n      .hf-remocn-animated-bar-chart .bars {\n        height: 210px;\n        display: grid;\n        grid-template-columns: repeat(7, 1fr);\n        align-items: end;\n        gap: 14px;\n      }\n      .hf-remocn-animated-bar-chart .bar {\n        height: calc(var(--h) * var(--hf-grow, 1));\n        border-radius: 14px 14px 5px 5px;\n        background: var(--hf-l1);\n      }\n      .hf-remocn-animated-bar-chart .chart-footer {\n        display: grid;\n        gap: 6px;\n      }\n      .hf-remocn-animated-bar-chart svg {\n        width: 100%;\n        height: 180px;\n        overflow: visible;\n      }\n      .hf-remocn-animated-bar-chart path {\n        color: var(--hf-l2);\n        stroke-dasharray: 900;\n        stroke-dashoffset: var(--hf-dash, 0);\n      }\n      .hf-remocn-animated-bar-chart .bar-labels {\n        display: grid;\n        grid-template-columns: repeat(7, 1fr);\n        text-align: center;\n        font-size: 13px;\n        font-weight: 500;\n        color: #9ca3af;\n        padding: 0 2px;\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"demo\"\n      data-composition-id=\"animated-bar-chart-demo\"\n      data-start=\"0\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n      data-duration=\"5\"\n    >\n      <div class=\"demo-frame\">\n        <div class=\"hf-remocn-animated-bar-chart\">\n          <header>\n            <div>\n              <h3>Animated Bar Chart</h3>\n              <p>A compact data card with deterministic bar growth and value callouts.</p>\n            </div>\n            <strong>+42%</strong>\n          </header>\n          <div class=\"bars\">\n            <span class=\"bar\" style=\"--h: 42%\"></span><span class=\"bar\" style=\"--h: 72%\"></span\n            ><span class=\"bar\" style=\"--h: 56%\"></span><span class=\"bar\" style=\"--h: 88%\"></span\n            ><span class=\"bar\" style=\"--h: 64%\"></span><span class=\"bar\" style=\"--h: 95%\"></span\n            ><span class=\"bar\" style=\"--h: 78%\"></span>\n          </div>\n          <div class=\"chart-footer\">\n            <svg viewBox=\"0 0 700 210\">\n              <!-- baseline -->\n              <line x1=\"20\" y1=\"185\" x2=\"680\" y2=\"185\" stroke=\"#e4e4e7\" stroke-width=\"1.5\" />\n              <path\n                d=\"M20 172 C120 90, 190 118, 260 74 S430 112, 508 42 S620 82, 680 30\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                stroke-width=\"10\"\n                stroke-linecap=\"round\"\n              />\n            </svg>\n            <div class=\"bar-labels\">\n              <span>Jan</span><span>Feb</span><span>Mar</span><span>Apr</span><span>May</span\n              ><span>Jun</span><span>Jul</span>\n            </div>\n          </div>\n        </div>\n      </div>\n      <script>\n        const tl = gsap.timeline({ paused: true });\n        const startTime = 0.5;\n        tl.fromTo(\n          \".hf-remocn-animated-bar-chart\",\n          { \"--hf-grow\": 0, \"--hf-dash\": 900 },\n          { \"--hf-grow\": 1, \"--hf-dash\": 0, duration: 1.2, ease: \"power3.out\" },\n          startTime,\n        );\n        tl.set({}, {}, 5);\n        window.__timelines = window.__timelines || {};\n        window.__timelines[\"animated-bar-chart-demo\"] = tl;\n      </script>\n    </div>\n  </body>\n</html>\n"}
\ No newline at end of file
+{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=1920, height=1080\" />\n    <title>Animated Bar Chart - Demo</title>\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      * {\n        box-sizing: border-box;\n      }\n      html,\n      body {\n        margin: 0;\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n      }\n      #demo {\n        width: 1920px;\n        height: 1080px;\n        display: grid;\n        place-items: center;\n        background: #f7f7f8;\n        font-family: Inter, system-ui, sans-serif;\n      }\n      .demo-frame {\n        display: grid;\n        place-items: center;\n        padding: 52px;\n        transform: scale(1.6);\n        transform-origin: center center;\n      }\n      .hf-catalog-animated-bar-chart {\n        --hf-accent: var(--accent, #111827);\n        --hf-ink: #111827;\n        --hf-l1: rgba(17, 24, 39, 0.72);\n        --hf-l2: rgba(17, 24, 39, 0.45);\n        --hf-l3: rgba(17, 24, 39, 0.18);\n        --hf-l4: rgba(17, 24, 39, 0.08);\n        --hf-hair: rgba(17, 24, 39, 0.14);\n        --hf-muted: #6b7280;\n        --hf-surface: #ffffff;\n        color: var(--hf-ink);\n        font-family: Inter, system-ui, sans-serif;\n      }\n      .hf-catalog-animated-bar-chart {\n        width: 760px;\n        min-height: 420px;\n        border-radius: 28px;\n        background: #fff;\n        padding: 34px;\n        box-shadow: 0 28px 80px rgba(15, 23, 42, 0.16);\n        display: grid;\n        gap: 22px;\n      }\n      .hf-catalog-animated-bar-chart header {\n        display: flex;\n        justify-content: space-between;\n        align-items: end;\n      }\n      .hf-catalog-animated-bar-chart h3 {\n        margin: 0;\n        font-size: 34px;\n        letter-spacing: -0.04em;\n        font-weight: 700;\n        color: #111827;\n      }\n      .hf-catalog-animated-bar-chart header p {\n        margin: 6px 0 0;\n        font-size: 16px;\n        color: #6b7280;\n        font-weight: 400;\n      }\n      .hf-catalog-animated-bar-chart strong {\n        font-size: 54px;\n        letter-spacing: -0.06em;\n        color: var(--hf-accent);\n        font-weight: 700;\n      }\n      .hf-catalog-animated-bar-chart .bars {\n        height: 210px;\n        display: grid;\n        grid-template-columns: repeat(7, 1fr);\n        align-items: end;\n        gap: 14px;\n      }\n      .hf-catalog-animated-bar-chart .bar {\n        height: calc(var(--h) * var(--hf-grow, 1));\n        border-radius: 14px 14px 5px 5px;\n        background: var(--hf-l1);\n      }\n      .hf-catalog-animated-bar-chart .chart-footer {\n        display: grid;\n        gap: 6px;\n      }\n      .hf-catalog-animated-bar-chart svg {\n        width: 100%;\n        height: 180px;\n        overflow: visible;\n      }\n      .hf-catalog-animated-bar-chart path {\n        color: var(--hf-l2);\n        stroke-dasharray: 900;\n        stroke-dashoffset: var(--hf-dash, 0);\n      }\n      .hf-catalog-animated-bar-chart .bar-labels {\n        display: grid;\n        grid-template-columns: repeat(7, 1fr);\n        text-align: center;\n        font-size: 13px;\n        font-weight: 500;\n        color: #9ca3af;\n        padding: 0 2px;\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"demo\"\n      data-composition-id=\"animated-bar-chart-demo\"\n      data-start=\"0\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n      data-duration=\"5\"\n    >\n      <div class=\"demo-frame\">\n        <div class=\"hf-catalog-animated-bar-chart\">\n          <header>\n            <div>\n              <h3>Animated Bar Chart</h3>\n              <p>A compact data card with deterministic bar growth and value callouts.</p>\n            </div>\n            <strong>+42%</strong>\n          </header>\n          <div class=\"bars\">\n            <span class=\"bar\" style=\"--h: 42%\"></span><span class=\"bar\" style=\"--h: 72%\"></span\n            ><span class=\"bar\" style=\"--h: 56%\"></span><span class=\"bar\" style=\"--h: 88%\"></span\n            ><span class=\"bar\" style=\"--h: 64%\"></span><span class=\"bar\" style=\"--h: 95%\"></span\n            ><span class=\"bar\" style=\"--h: 78%\"></span>\n          </div>\n          <div class=\"chart-footer\">\n            <svg viewBox=\"0 0 700 210\">\n              <!-- baseline -->\n              <line x1=\"20\" y1=\"185\" x2=\"680\" y2=\"185\" stroke=\"#e4e4e7\" stroke-width=\"1.5\" />\n              <path\n                d=\"M20 172 C120 90, 190 118, 260 74 S430 112, 508 42 S620 82, 680 30\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                stroke-width=\"10\"\n                stroke-linecap=\"round\"\n              />\n            </svg>\n            <div class=\"bar-labels\">\n              <span>Jan</span><span>Feb</span><span>Mar</span><span>Apr</span><span>May</span\n              ><span>Jun</span><span>Jul</span>\n            </div>\n          </div>\n        </div>\n      </div>\n      <script>\n        const tl = gsap.timeline({ paused: true });\n        const startTime = 0.5;\n        tl.fromTo(\n          \".hf-catalog-animated-bar-chart\",\n          { \"--hf-grow\": 0, \"--hf-dash\": 900 },\n          { \"--hf-grow\": 1, \"--hf-dash\": 0, duration: 1.2, ease: \"power3.out\" },\n          startTime,\n        );\n        tl.set({}, {}, 5);\n        window.__timelines = window.__timelines || {};\n        window.__timelines[\"animated-bar-chart-demo\"] = tl;\n      </script>\n    </div>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/docs/public/catalog/components/blur-out-up.json b/docs/public/catalog/components/blur-out-up.json
index 4944a48edb..d3db22b259 100644
--- a/docs/public/catalog/components/blur-out-up.json
+++ b/docs/public/catalog/components/blur-out-up.json
@@ -1 +1 @@
-{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=1920, height=1080\" />\n    <title>Blur Out Up - Demo</title>\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      * {\n        box-sizing: border-box;\n      }\n      html,\n      body {\n        margin: 0;\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n      }\n      #demo {\n        width: 1920px;\n        height: 1080px;\n        display: grid;\n        place-items: center;\n        background: #f7f7f8;\n        font-family: Inter, system-ui, sans-serif;\n      }\n      .demo-frame {\n        display: grid;\n        place-items: center;\n        min-width: 900px;\n        min-height: 500px;\n        padding: 64px;\n        /* ponytail: scale wrapper — GSAP targets spans inside, not this element */\n        transform: scale(2.6);\n      }\n      .hf-remocn-blur-out-up {\n        color: #18181b;\n        font-family: Inter, system-ui, sans-serif;\n        font-weight: 900;\n        letter-spacing: -0.04em;\n      }\n      .hf-remocn-blur-out-up {\n        display: inline-flex;\n        gap: 12px;\n        font-size: 56px;\n        line-height: 1;\n      }\n      .hf-remocn-blur-out-up span {\n        display: inline-block;\n        transform: translate(var(--hf-word-x, 0px), var(--hf-word-y, 0px))\n          scale(var(--hf-word-scale, 1));\n        filter: blur(var(--hf-word-blur, 0px));\n        will-change: transform, filter, opacity;\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"demo\"\n      data-composition-id=\"blur-out-up-demo\"\n      data-start=\"0\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n      data-duration=\"5\"\n    >\n      <div class=\"demo-frame\">\n        <div class=\"hf-remocn-blur-out-up\"><span>BLUR</span><span>OUT</span><span>UP</span></div>\n      </div>\n      <script>\n        const tl = gsap.timeline({ paused: true });\n        const startTime = 0.5;\n        tl.fromTo(\n          \".hf-remocn-blur-out-up span\",\n          { opacity: 0, \"--hf-word-y\": \"22px\", \"--hf-word-scale\": 0.92, \"--hf-word-blur\": \"5px\" },\n          {\n            opacity: 1,\n            \"--hf-word-y\": \"0px\",\n            \"--hf-word-scale\": 1,\n            \"--hf-word-blur\": \"0px\",\n            duration: 0.3,\n            stagger: 0.055,\n            ease: \"power3.out\",\n          },\n          startTime,\n        );\n        tl.set({}, {}, 5);\n        window.__timelines = window.__timelines || {};\n        window.__timelines[\"blur-out-up-demo\"] = tl;\n      </script>\n    </div>\n  </body>\n</html>\n"}
\ No newline at end of file
+{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=1920, height=1080\" />\n    <title>Blur Out Up - Demo</title>\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      * {\n        box-sizing: border-box;\n      }\n      html,\n      body {\n        margin: 0;\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n      }\n      #demo {\n        width: 1920px;\n        height: 1080px;\n        display: grid;\n        place-items: center;\n        background: #f7f7f8;\n        font-family: Inter, system-ui, sans-serif;\n      }\n      .demo-frame {\n        display: grid;\n        place-items: center;\n        min-width: 900px;\n        min-height: 500px;\n        padding: 64px;\n        /* ponytail: scale wrapper — GSAP targets spans inside, not this element */\n        transform: scale(2.6);\n      }\n      .hf-catalog-blur-out-up {\n        color: #18181b;\n        font-family: Inter, system-ui, sans-serif;\n        font-weight: 900;\n        letter-spacing: -0.04em;\n      }\n      .hf-catalog-blur-out-up {\n        display: inline-flex;\n        gap: 12px;\n        font-size: 56px;\n        line-height: 1;\n      }\n      .hf-catalog-blur-out-up span {\n        display: inline-block;\n        transform: translate(var(--hf-word-x, 0px), var(--hf-word-y, 0px))\n          scale(var(--hf-word-scale, 1));\n        filter: blur(var(--hf-word-blur, 0px));\n        will-change: transform, filter, opacity;\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"demo\"\n      data-composition-id=\"blur-out-up-demo\"\n      data-start=\"0\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n      data-duration=\"5\"\n    >\n      <div class=\"demo-frame\">\n        <div class=\"hf-catalog-blur-out-up\"><span>BLUR</span><span>OUT</span><span>UP</span></div>\n      </div>\n      <script>\n        const tl = gsap.timeline({ paused: true });\n        const startTime = 0.5;\n        tl.fromTo(\n          \".hf-catalog-blur-out-up span\",\n          { opacity: 0, \"--hf-word-y\": \"22px\", \"--hf-word-scale\": 0.92, \"--hf-word-blur\": \"5px\" },\n          {\n            opacity: 1,\n            \"--hf-word-y\": \"0px\",\n            \"--hf-word-scale\": 1,\n            \"--hf-word-blur\": \"0px\",\n            duration: 0.3,\n            stagger: 0.055,\n            ease: \"power3.out\",\n          },\n          startTime,\n        );\n        tl.set({}, {}, 5);\n        window.__timelines = window.__timelines || {};\n        window.__timelines[\"blur-out-up-demo\"] = tl;\n      </script>\n    </div>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/docs/public/catalog/components/chromatic-aberration-wipe.json b/docs/public/catalog/components/chromatic-aberration-wipe.json
index ed6bf42d33..5733ce0252 100644
--- a/docs/public/catalog/components/chromatic-aberration-wipe.json
+++ b/docs/public/catalog/components/chromatic-aberration-wipe.json
@@ -1 +1 @@
-{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=1920, height=1080\" />\n    <title>Chromatic Aberration Wipe - Demo</title>\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      * {\n        box-sizing: border-box;\n      }\n      html,\n      body {\n        margin: 0;\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n      }\n      #demo {\n        width: 1920px;\n        height: 1080px;\n        display: grid;\n        place-items: center;\n        background: #f7f7f8;\n        font-family: Inter, system-ui, sans-serif;\n      }\n      .demo-frame {\n        display: grid;\n        place-items: center;\n        padding: 52px;\n        /* ponytail: scale wrapper (not a GSAP target) to fill ~65% of 1920x1080 */\n        transform: scale(1.85);\n      }\n      .hf-remocn-chromatic-aberration-wipe {\n        --hf-accent: #2563eb;\n        --hf-ink: #111827;\n        --hf-muted: #6b7280;\n        --hf-surface: #ffffff;\n        color: var(--hf-ink);\n        font-family: Inter, system-ui, sans-serif;\n      }\n      .hf-remocn-chromatic-aberration-wipe {\n        position: relative;\n        width: 760px;\n        height: 428px;\n        overflow: hidden;\n        border-radius: 30px;\n        background: #111827;\n        box-shadow: 0 28px 80px rgba(15, 23, 42, 0.2);\n      }\n      .hf-remocn-chromatic-aberration-wipe .scene {\n        position: absolute;\n        inset: 0;\n        display: grid;\n        place-items: center;\n        font-weight: 900;\n        font-size: 58px;\n        letter-spacing: -0.05em;\n        color: #fff;\n      }\n      .hf-remocn-chromatic-aberration-wipe .from {\n        background: linear-gradient(135deg, #111827, #374151);\n        transform: translate(var(--hf-from-x, 0px), var(--hf-from-y, 0px))\n          scale(var(--hf-from-scale, 1));\n        filter: blur(var(--hf-from-blur, 0px));\n      }\n      .hf-remocn-chromatic-aberration-wipe .to {\n        background: linear-gradient(135deg, #2563eb, #7c3aed);\n        transform: translate(var(--hf-to-x, 0px), var(--hf-to-y, 0px)) scale(var(--hf-to-scale, 1));\n        clip-path: inset(\n          var(--hf-clip-top, 0%) var(--hf-clip-right, 100%) var(--hf-clip-bottom, 0%)\n            var(--hf-clip-left, 0%)\n        );\n      }\n      .hf-remocn-chromatic-aberration-wipe .fx {\n        position: absolute;\n        inset: 0;\n        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.75), transparent);\n        mix-blend-mode: screen;\n        transform: translateX(var(--hf-fx-x, -110%));\n      }\n      .hf-remocn-chromatic-aberration-wipe .rgb {\n        position: absolute;\n        inset: 0;\n        pointer-events: none;\n        opacity: var(--hf-rgb-opacity, 0);\n        background: linear-gradient(\n          90deg,\n          rgba(239, 68, 68, 0.35),\n          transparent,\n          rgba(34, 211, 238, 0.35)\n        );\n        transform: translateX(var(--hf-rgb-x, 0px));\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"demo\"\n      data-composition-id=\"chromatic-aberration-wipe-demo\"\n      data-start=\"0\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n      data-duration=\"5\"\n    >\n      <div class=\"demo-frame\">\n        <div class=\"hf-remocn-chromatic-aberration-wipe\">\n          <div class=\"scene from\">Before</div>\n          <div class=\"scene to\">Chromatic Aberration Wipe</div>\n          <div class=\"fx\"></div>\n          <div class=\"rgb\"></div>\n        </div>\n      </div>\n      <script>\n        const tl = gsap.timeline({ paused: true });\n        const startTime = 0.5;\n        tl.fromTo(\n          \".hf-remocn-chromatic-aberration-wipe .to\",\n          { \"--hf-clip-right\": \"100%\", \"--hf-to-x\": \"60px\", \"--hf-to-scale\": 1.04 },\n          {\n            \"--hf-clip-right\": \"0%\",\n            \"--hf-to-x\": \"0px\",\n            \"--hf-to-scale\": 1,\n            duration: 0.9,\n            ease: \"power3.inOut\",\n          },\n          startTime,\n        );\n        tl.to(\n          \".hf-remocn-chromatic-aberration-wipe .from\",\n          {\n            \"--hf-from-x\": \"-70px\",\n            \"--hf-from-scale\": 0.96,\n            \"--hf-from-blur\": \"5px\",\n            duration: 0.9,\n            ease: \"power3.inOut\",\n          },\n          startTime,\n        );\n        tl.fromTo(\n          \".hf-remocn-chromatic-aberration-wipe .fx\",\n          { \"--hf-fx-x\": \"-110%\" },\n          { \"--hf-fx-x\": \"110%\", duration: 0.58, ease: \"power2.inOut\" },\n          startTime + 0.18,\n        );\n        tl.fromTo(\n          \".hf-remocn-chromatic-aberration-wipe .rgb\",\n          { \"--hf-rgb-opacity\": 0, \"--hf-rgb-x\": \"-16px\" },\n          {\n            \"--hf-rgb-opacity\": 1,\n            \"--hf-rgb-x\": \"16px\",\n            repeat: 3,\n            yoyo: true,\n            duration: 0.07,\n            ease: \"steps(1)\",\n          },\n          startTime + 0.32,\n        );\n        tl.set({}, {}, 5);\n        window.__timelines = window.__timelines || {};\n        window.__timelines[\"chromatic-aberration-wipe-demo\"] = tl;\n      </script>\n    </div>\n  </body>\n</html>\n"}
\ No newline at end of file
+{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=1920, height=1080\" />\n    <title>Chromatic Aberration Wipe - Demo</title>\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      * {\n        box-sizing: border-box;\n      }\n      html,\n      body {\n        margin: 0;\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n      }\n      #demo {\n        width: 1920px;\n        height: 1080px;\n        display: grid;\n        place-items: center;\n        background: #f7f7f8;\n        font-family: Inter, system-ui, sans-serif;\n      }\n      .demo-frame {\n        display: grid;\n        place-items: center;\n        padding: 52px;\n        /* ponytail: scale wrapper (not a GSAP target) to fill ~65% of 1920x1080 */\n        transform: scale(1.85);\n      }\n      .hf-catalog-chromatic-aberration-wipe {\n        --hf-accent: #2563eb;\n        --hf-ink: #111827;\n        --hf-muted: #6b7280;\n        --hf-surface: #ffffff;\n        color: var(--hf-ink);\n        font-family: Inter, system-ui, sans-serif;\n      }\n      .hf-catalog-chromatic-aberration-wipe {\n        position: relative;\n        width: 760px;\n        height: 428px;\n        overflow: hidden;\n        border-radius: 30px;\n        background: #111827;\n        box-shadow: 0 28px 80px rgba(15, 23, 42, 0.2);\n      }\n      .hf-catalog-chromatic-aberration-wipe .scene {\n        position: absolute;\n        inset: 0;\n        display: grid;\n        place-items: center;\n        font-weight: 900;\n        font-size: 58px;\n        letter-spacing: -0.05em;\n        color: #fff;\n      }\n      .hf-catalog-chromatic-aberration-wipe .from {\n        background: linear-gradient(135deg, #111827, #374151);\n        transform: translate(var(--hf-from-x, 0px), var(--hf-from-y, 0px))\n          scale(var(--hf-from-scale, 1));\n        filter: blur(var(--hf-from-blur, 0px));\n      }\n      .hf-catalog-chromatic-aberration-wipe .to {\n        background: linear-gradient(135deg, #2563eb, #7c3aed);\n        transform: translate(var(--hf-to-x, 0px), var(--hf-to-y, 0px)) scale(var(--hf-to-scale, 1));\n        clip-path: inset(\n          var(--hf-clip-top, 0%) var(--hf-clip-right, 100%) var(--hf-clip-bottom, 0%)\n            var(--hf-clip-left, 0%)\n        );\n      }\n      .hf-catalog-chromatic-aberration-wipe .fx {\n        position: absolute;\n        inset: 0;\n        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.75), transparent);\n        mix-blend-mode: screen;\n        transform: translateX(var(--hf-fx-x, -110%));\n      }\n      .hf-catalog-chromatic-aberration-wipe .rgb {\n        position: absolute;\n        inset: 0;\n        pointer-events: none;\n        opacity: var(--hf-rgb-opacity, 0);\n        background: linear-gradient(\n          90deg,\n          rgba(239, 68, 68, 0.35),\n          transparent,\n          rgba(34, 211, 238, 0.35)\n        );\n        transform: translateX(var(--hf-rgb-x, 0px));\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"demo\"\n      data-composition-id=\"chromatic-aberration-wipe-demo\"\n      data-start=\"0\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n      data-duration=\"5\"\n    >\n      <div class=\"demo-frame\">\n        <div class=\"hf-catalog-chromatic-aberration-wipe\">\n          <div class=\"scene from\">Before</div>\n          <div class=\"scene to\">Chromatic Aberration Wipe</div>\n          <div class=\"fx\"></div>\n          <div class=\"rgb\"></div>\n        </div>\n      </div>\n      <script>\n        const tl = gsap.timeline({ paused: true });\n        const startTime = 0.5;\n        tl.fromTo(\n          \".hf-catalog-chromatic-aberration-wipe .to\",\n          { \"--hf-clip-right\": \"100%\", \"--hf-to-x\": \"60px\", \"--hf-to-scale\": 1.04 },\n          {\n            \"--hf-clip-right\": \"0%\",\n            \"--hf-to-x\": \"0px\",\n            \"--hf-to-scale\": 1,\n            duration: 0.9,\n            ease: \"power3.inOut\",\n          },\n          startTime,\n        );\n        tl.to(\n          \".hf-catalog-chromatic-aberration-wipe .from\",\n          {\n            \"--hf-from-x\": \"-70px\",\n            \"--hf-from-scale\": 0.96,\n            \"--hf-from-blur\": \"5px\",\n            duration: 0.9,\n            ease: \"power3.inOut\",\n          },\n          startTime,\n        );\n        tl.fromTo(\n          \".hf-catalog-chromatic-aberration-wipe .fx\",\n          { \"--hf-fx-x\": \"-110%\" },\n          { \"--hf-fx-x\": \"110%\", duration: 0.58, ease: \"power2.inOut\" },\n          startTime + 0.18,\n        );\n        tl.fromTo(\n          \".hf-catalog-chromatic-aberration-wipe .rgb\",\n          { \"--hf-rgb-opacity\": 0, \"--hf-rgb-x\": \"-16px\" },\n          {\n            \"--hf-rgb-opacity\": 1,\n            \"--hf-rgb-x\": \"16px\",\n            repeat: 3,\n            yoyo: true,\n            duration: 0.07,\n            ease: \"steps(1)\",\n          },\n          startTime + 0.32,\n        );\n        tl.set({}, {}, 5);\n        window.__timelines = window.__timelines || {};\n        window.__timelines[\"chromatic-aberration-wipe-demo\"] = tl;\n      </script>\n    </div>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/docs/public/catalog/components/confetti.json b/docs/public/catalog/components/confetti.json
index c3de882b37..a63712af01 100644
--- a/docs/public/catalog/components/confetti.json
+++ b/docs/public/catalog/components/confetti.json
@@ -1 +1 @@
-{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=1920, height=1080\" />\n    <title>Confetti - Demo</title>\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      * {\n        box-sizing: border-box;\n      }\n      html,\n      body {\n        margin: 0;\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n      }\n      #demo {\n        width: 1920px;\n        height: 1080px;\n        display: grid;\n        place-items: center;\n        background: var(--bg, #f7f7f8);\n        font-family: var(--font-body, Inter, system-ui, sans-serif);\n      }\n      .demo-frame {\n        display: grid;\n        place-items: center;\n        padding: 52px;\n        transform: scale(1.6); /* ponytail: scale wrapper, not GSAP targets */\n      }\n      .hf-remocn-confetti {\n        color: var(--fg, #111827);\n        font-family: var(--font-body, Inter, system-ui, sans-serif);\n      }\n      .hf-remocn-confetti {\n        position: relative;\n        width: 760px;\n        height: 428px;\n        overflow: hidden;\n        border-radius: 30px;\n        background: var(--bg, #080b12);\n        box-shadow: 0 28px 80px color-mix(in srgb, var(--bg, #0f172a) 20%, transparent);\n      }\n      .hf-remocn-confetti .mesh {\n        position: absolute;\n        inset: -22%;\n        filter: blur(44px);\n        opacity: 0.88;\n        background:\n          radial-gradient(\n            circle at var(--hf-x1, 20%) var(--hf-y1, 30%),\n            var(--accent, #60a5fa) 0 18%,\n            transparent 32%\n          ),\n          radial-gradient(\n            circle at var(--hf-x2, 76%) var(--hf-y2, 52%),\n            var(--accent-2, #f472b6) 0 16%,\n            transparent 34%\n          ),\n          radial-gradient(\n            circle at var(--hf-x3, 46%) var(--hf-y3, 78%),\n            var(--brand, #34d399) 0 18%,\n            transparent 34%\n          );\n      }\n      .hf-remocn-confetti .card {\n        position: absolute;\n        inset: 74px 92px;\n        border: 1px solid color-mix(in srgb, var(--border, #ffffff) 16%, transparent);\n        border-radius: 26px;\n        background: color-mix(in srgb, var(--surface, #ffffff) 8%, transparent);\n        color: var(--fg, #fff);\n        display: grid;\n        place-items: center;\n        text-align: center;\n        overflow: hidden;\n      }\n      .hf-remocn-confetti .spot {\n        position: absolute;\n        width: 260px;\n        height: 260px;\n        border-radius: 50%;\n        background: radial-gradient(\n          circle,\n          color-mix(in srgb, var(--fg, #ffffff) 50%, transparent),\n          transparent 65%\n        );\n        transform: translate(var(--hf-spot-x, 0px), var(--hf-spot-y, 0px));\n        mix-blend-mode: screen;\n      }\n      .hf-remocn-confetti .particle {\n        position: absolute;\n        left: 50%;\n        top: 54%;\n        width: 12px;\n        height: 20px;\n        border-radius: 3px;\n        background: var(--c);\n        transform: translate(var(--hf-px, 0px), var(--hf-py, 0px)) rotate(var(--hf-pr, 0deg));\n        opacity: var(--hf-po, 0);\n      }\n      .hf-remocn-confetti h3 {\n        margin: 0;\n        font-size: 44px;\n        letter-spacing: -0.04em;\n      }\n      .hf-remocn-confetti p {\n        margin: 8px 0 0;\n        font-size: 15px;\n        color: color-mix(in srgb, var(--muted, #ffffff) 70%, transparent);\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"demo\"\n      data-composition-id=\"confetti-demo\"\n      data-start=\"0\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n      data-duration=\"5\"\n    >\n      <div class=\"demo-frame\">\n        <div class=\"hf-remocn-confetti\">\n          <div class=\"mesh\"></div>\n          <div class=\"card\">\n            <div class=\"spot\"></div>\n            <div>\n              <h3>Confetti</h3>\n              <p>A deterministic celebration burst with seeded particles and gravity.</p>\n            </div>\n          </div>\n          <span class=\"particle\" style=\"--c: var(--accent, #f43f5e)\"></span\n          ><span class=\"particle\" style=\"--c: var(--accent, #f59e0b)\"></span\n          ><span class=\"particle\" style=\"--c: var(--accent, #22c55e)\"></span\n          ><span class=\"particle\" style=\"--c: var(--accent, #38bdf8)\"></span\n          ><span class=\"particle\" style=\"--c: var(--accent, #a855f7)\"></span\n          ><span class=\"particle\" style=\"--c: var(--accent, #f43f5e)\"></span\n          ><span class=\"particle\" style=\"--c: var(--accent, #f59e0b)\"></span\n          ><span class=\"particle\" style=\"--c: var(--accent, #22c55e)\"></span\n          ><span class=\"particle\" style=\"--c: var(--accent, #38bdf8)\"></span\n          ><span class=\"particle\" style=\"--c: var(--accent, #a855f7)\"></span\n          ><span class=\"particle\" style=\"--c: var(--accent, #f43f5e)\"></span\n          ><span class=\"particle\" style=\"--c: var(--accent, #f59e0b)\"></span\n          ><span class=\"particle\" style=\"--c: var(--accent, #22c55e)\"></span\n          ><span class=\"particle\" style=\"--c: var(--accent, #38bdf8)\"></span\n          ><span class=\"particle\" style=\"--c: var(--accent, #a855f7)\"></span\n          ><span class=\"particle\" style=\"--c: var(--accent, #f43f5e)\"></span\n          ><span class=\"particle\" style=\"--c: var(--accent, #f59e0b)\"></span\n          ><span class=\"particle\" style=\"--c: var(--accent, #22c55e)\"></span\n          ><span class=\"particle\" style=\"--c: var(--accent, #38bdf8)\"></span\n          ><span class=\"particle\" style=\"--c: var(--accent, #a855f7)\"></span\n          ><span class=\"particle\" style=\"--c: var(--accent, #f43f5e)\"></span\n          ><span class=\"particle\" style=\"--c: var(--accent, #f59e0b)\"></span>\n        </div>\n      </div>\n      <script>\n        const tl = gsap.timeline({ paused: true });\n        const startTime = 0.5;\n        tl.fromTo(\n          \".hf-remocn-confetti .mesh\",\n          {\n            \"--hf-x1\": \"18%\",\n            \"--hf-y1\": \"28%\",\n            \"--hf-x2\": \"78%\",\n            \"--hf-y2\": \"46%\",\n            \"--hf-x3\": \"44%\",\n            \"--hf-y3\": \"80%\",\n          },\n          {\n            \"--hf-x1\": \"34%\",\n            \"--hf-y1\": \"42%\",\n            \"--hf-x2\": \"62%\",\n            \"--hf-y2\": \"60%\",\n            \"--hf-x3\": \"58%\",\n            \"--hf-y3\": \"64%\",\n            duration: 4,\n            ease: \"sine.inOut\",\n          },\n          startTime,\n        );\n        tl.fromTo(\n          \".hf-remocn-confetti .spot\",\n          { \"--hf-spot-x\": \"-120px\", \"--hf-spot-y\": \"-70px\" },\n          { \"--hf-spot-x\": \"190px\", \"--hf-spot-y\": \"90px\", duration: 3, ease: \"sine.inOut\" },\n          startTime,\n        );\n        const particles_confetti = gsap.utils.toArray(\".hf-remocn-confetti .particle\");\n        if (particles_confetti.length) {\n          tl.fromTo(\n            particles_confetti,\n            { \"--hf-po\": 0, \"--hf-px\": \"0px\", \"--hf-py\": \"0px\", \"--hf-pr\": \"0deg\" },\n            {\n              \"--hf-po\": 1,\n              \"--hf-px\": (i) => Math.cos(i * 0.83) * 250 + \"px\",\n              \"--hf-py\": (i) => -120 - Math.sin(i * 0.61) * 120 + \"px\",\n              \"--hf-pr\": (i) => 180 + i * 37 + \"deg\",\n              duration: 0.8,\n              stagger: 0.015,\n              ease: \"power2.out\",\n            },\n            startTime + 0.2,\n          );\n        }\n        tl.set({}, {}, 5);\n        window.__timelines = window.__timelines || {};\n        window.__timelines[\"confetti-demo\"] = tl;\n      </script>\n    </div>\n  </body>\n</html>\n"}
\ No newline at end of file
+{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=1920, height=1080\" />\n    <title>Confetti - Demo</title>\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      * {\n        box-sizing: border-box;\n      }\n      html,\n      body {\n        margin: 0;\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n      }\n      #demo {\n        width: 1920px;\n        height: 1080px;\n        display: grid;\n        place-items: center;\n        background: var(--bg, #f7f7f8);\n        font-family: var(--font-body, Inter, system-ui, sans-serif);\n      }\n      .demo-frame {\n        display: grid;\n        place-items: center;\n        padding: 52px;\n        transform: scale(1.6); /* ponytail: scale wrapper, not GSAP targets */\n      }\n      .hf-catalog-confetti {\n        color: var(--fg, #111827);\n        font-family: var(--font-body, Inter, system-ui, sans-serif);\n      }\n      .hf-catalog-confetti {\n        position: relative;\n        width: 760px;\n        height: 428px;\n        overflow: hidden;\n        border-radius: 30px;\n        background: var(--bg, #080b12);\n        box-shadow: 0 28px 80px color-mix(in srgb, var(--bg, #0f172a) 20%, transparent);\n      }\n      .hf-catalog-confetti .mesh {\n        position: absolute;\n        inset: -22%;\n        filter: blur(44px);\n        opacity: 0.88;\n        background:\n          radial-gradient(\n            circle at var(--hf-x1, 20%) var(--hf-y1, 30%),\n            var(--accent, #60a5fa) 0 18%,\n            transparent 32%\n          ),\n          radial-gradient(\n            circle at var(--hf-x2, 76%) var(--hf-y2, 52%),\n            var(--accent-2, #f472b6) 0 16%,\n            transparent 34%\n          ),\n          radial-gradient(\n            circle at var(--hf-x3, 46%) var(--hf-y3, 78%),\n            var(--brand, #34d399) 0 18%,\n            transparent 34%\n          );\n      }\n      .hf-catalog-confetti .card {\n        position: absolute;\n        inset: 74px 92px;\n        border: 1px solid color-mix(in srgb, var(--border, #ffffff) 16%, transparent);\n        border-radius: 26px;\n        background: color-mix(in srgb, var(--surface, #ffffff) 8%, transparent);\n        color: var(--fg, #fff);\n        display: grid;\n        place-items: center;\n        text-align: center;\n        overflow: hidden;\n      }\n      .hf-catalog-confetti .spot {\n        position: absolute;\n        width: 260px;\n        height: 260px;\n        border-radius: 50%;\n        background: radial-gradient(\n          circle,\n          color-mix(in srgb, var(--fg, #ffffff) 50%, transparent),\n          transparent 65%\n        );\n        transform: translate(var(--hf-spot-x, 0px), var(--hf-spot-y, 0px));\n        mix-blend-mode: screen;\n      }\n      .hf-catalog-confetti .particle {\n        position: absolute;\n        left: 50%;\n        top: 54%;\n        width: 12px;\n        height: 20px;\n        border-radius: 3px;\n        background: var(--c);\n        transform: translate(var(--hf-px, 0px), var(--hf-py, 0px)) rotate(var(--hf-pr, 0deg));\n        opacity: var(--hf-po, 0);\n      }\n      .hf-catalog-confetti h3 {\n        margin: 0;\n        font-size: 44px;\n        letter-spacing: -0.04em;\n      }\n      .hf-catalog-confetti p {\n        margin: 8px 0 0;\n        font-size: 15px;\n        color: color-mix(in srgb, var(--muted, #ffffff) 70%, transparent);\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"demo\"\n      data-composition-id=\"confetti-demo\"\n      data-start=\"0\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n      data-duration=\"5\"\n    >\n      <div class=\"demo-frame\">\n        <div class=\"hf-catalog-confetti\">\n          <div class=\"mesh\"></div>\n          <div class=\"card\">\n            <div class=\"spot\"></div>\n            <div>\n              <h3>Confetti</h3>\n              <p>A deterministic celebration burst with seeded particles and gravity.</p>\n            </div>\n          </div>\n          <span class=\"particle\" style=\"--c: var(--accent, #f43f5e)\"></span\n          ><span class=\"particle\" style=\"--c: var(--accent, #f59e0b)\"></span\n          ><span class=\"particle\" style=\"--c: var(--accent, #22c55e)\"></span\n          ><span class=\"particle\" style=\"--c: var(--accent, #38bdf8)\"></span\n          ><span class=\"particle\" style=\"--c: var(--accent, #a855f7)\"></span\n          ><span class=\"particle\" style=\"--c: var(--accent, #f43f5e)\"></span\n          ><span class=\"particle\" style=\"--c: var(--accent, #f59e0b)\"></span\n          ><span class=\"particle\" style=\"--c: var(--accent, #22c55e)\"></span\n          ><span class=\"particle\" style=\"--c: var(--accent, #38bdf8)\"></span\n          ><span class=\"particle\" style=\"--c: var(--accent, #a855f7)\"></span\n          ><span class=\"particle\" style=\"--c: var(--accent, #f43f5e)\"></span\n          ><span class=\"particle\" style=\"--c: var(--accent, #f59e0b)\"></span\n          ><span class=\"particle\" style=\"--c: var(--accent, #22c55e)\"></span\n          ><span class=\"particle\" style=\"--c: var(--accent, #38bdf8)\"></span\n          ><span class=\"particle\" style=\"--c: var(--accent, #a855f7)\"></span\n          ><span class=\"particle\" style=\"--c: var(--accent, #f43f5e)\"></span\n          ><span class=\"particle\" style=\"--c: var(--accent, #f59e0b)\"></span\n          ><span class=\"particle\" style=\"--c: var(--accent, #22c55e)\"></span\n          ><span class=\"particle\" style=\"--c: var(--accent, #38bdf8)\"></span\n          ><span class=\"particle\" style=\"--c: var(--accent, #a855f7)\"></span\n          ><span class=\"particle\" style=\"--c: var(--accent, #f43f5e)\"></span\n          ><span class=\"particle\" style=\"--c: var(--accent, #f59e0b)\"></span>\n        </div>\n      </div>\n      <script>\n        const tl = gsap.timeline({ paused: true });\n        const startTime = 0.5;\n        tl.fromTo(\n          \".hf-catalog-confetti .mesh\",\n          {\n            \"--hf-x1\": \"18%\",\n            \"--hf-y1\": \"28%\",\n            \"--hf-x2\": \"78%\",\n            \"--hf-y2\": \"46%\",\n            \"--hf-x3\": \"44%\",\n            \"--hf-y3\": \"80%\",\n          },\n          {\n            \"--hf-x1\": \"34%\",\n            \"--hf-y1\": \"42%\",\n            \"--hf-x2\": \"62%\",\n            \"--hf-y2\": \"60%\",\n            \"--hf-x3\": \"58%\",\n            \"--hf-y3\": \"64%\",\n            duration: 4,\n            ease: \"sine.inOut\",\n          },\n          startTime,\n        );\n        tl.fromTo(\n          \".hf-catalog-confetti .spot\",\n          { \"--hf-spot-x\": \"-120px\", \"--hf-spot-y\": \"-70px\" },\n          { \"--hf-spot-x\": \"190px\", \"--hf-spot-y\": \"90px\", duration: 3, ease: \"sine.inOut\" },\n          startTime,\n        );\n        const particles_confetti = gsap.utils.toArray(\".hf-catalog-confetti .particle\");\n        if (particles_confetti.length) {\n          tl.fromTo(\n            particles_confetti,\n            { \"--hf-po\": 0, \"--hf-px\": \"0px\", \"--hf-py\": \"0px\", \"--hf-pr\": \"0deg\" },\n            {\n              \"--hf-po\": 1,\n              \"--hf-px\": (i) => Math.cos(i * 0.83) * 250 + \"px\",\n              \"--hf-py\": (i) => -120 - Math.sin(i * 0.61) * 120 + \"px\",\n              \"--hf-pr\": (i) => 180 + i * 37 + \"deg\",\n              duration: 0.8,\n              stagger: 0.015,\n              ease: \"power2.out\",\n            },\n            startTime + 0.2,\n          );\n        }\n        tl.set({}, {}, 5);\n        window.__timelines = window.__timelines || {};\n        window.__timelines[\"confetti-demo\"] = tl;\n      </script>\n    </div>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/docs/public/catalog/components/directional-wipe.json b/docs/public/catalog/components/directional-wipe.json
index 6722cd8a2b..00f2939219 100644
--- a/docs/public/catalog/components/directional-wipe.json
+++ b/docs/public/catalog/components/directional-wipe.json
@@ -1 +1 @@
-{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=1920, height=1080\" />\n    <title>Directional Wipe - Demo</title>\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      * {\n        box-sizing: border-box;\n      }\n      html,\n      body {\n        margin: 0;\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n      }\n      #demo {\n        width: 1920px;\n        height: 1080px;\n        display: grid;\n        place-items: center;\n        background: #f7f7f8;\n        font-family: Inter, system-ui, sans-serif;\n      }\n      .demo-frame {\n        display: grid;\n        place-items: center;\n        padding: 52px;\n        /* ponytail: scale wrapper only — GSAP targets live inside .hf-remocn-directional-wipe, not here */\n        transform: scale(1.65);\n      }\n      .hf-remocn-directional-wipe {\n        --hf-accent: var(--accent, rgba(255, 255, 255, 0.28));\n        --hf-l1: rgba(255, 255, 255, 0.72);\n        --hf-l3: rgba(255, 255, 255, 0.18);\n        --hf-l4: rgba(255, 255, 255, 0.08);\n        --hf-hair: rgba(255, 255, 255, 0.14);\n        --hf-ink: #111827;\n        --hf-muted: #6b7280;\n        --hf-surface: #ffffff;\n        color: var(--hf-ink);\n        font-family: Inter, system-ui, sans-serif;\n      }\n      .hf-remocn-directional-wipe {\n        position: relative;\n        width: 760px;\n        height: 428px;\n        overflow: hidden;\n        border-radius: 30px;\n        background: #111827;\n        box-shadow: 0 28px 80px rgba(15, 23, 42, 0.2);\n      }\n      .hf-remocn-directional-wipe .scene {\n        position: absolute;\n        inset: 0;\n        display: grid;\n        place-items: center;\n        font-weight: 900;\n        font-size: 58px;\n        letter-spacing: -0.05em;\n        color: #fff;\n      }\n      .hf-remocn-directional-wipe .from {\n        background:\n          repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 4px),\n          var(--hf-l4);\n        transform: translate(var(--hf-from-x, 0px), var(--hf-from-y, 0px))\n          scale(var(--hf-from-scale, 1));\n        filter: blur(var(--hf-from-blur, 0px));\n      }\n      .hf-remocn-directional-wipe .to {\n        background:\n          repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 4px),\n          var(--hf-l3);\n        box-shadow: inset 0 0 0 2px var(--hf-accent);\n        transform: translate(var(--hf-to-x, 0px), var(--hf-to-y, 0px)) scale(var(--hf-to-scale, 1));\n        clip-path: inset(\n          var(--hf-clip-top, 0%) var(--hf-clip-right, 100%) var(--hf-clip-bottom, 0%)\n            var(--hf-clip-left, 0%)\n        );\n      }\n      .hf-remocn-directional-wipe .fx {\n        position: absolute;\n        inset: 0;\n        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.75), transparent);\n        mix-blend-mode: screen;\n        transform: translateX(var(--hf-fx-x, -110%));\n      }\n      .hf-remocn-directional-wipe .rgb {\n        position: absolute;\n        inset: 0;\n        pointer-events: none;\n        opacity: var(--hf-rgb-opacity, 0);\n        background: linear-gradient(\n          90deg,\n          rgba(239, 68, 68, 0.35),\n          transparent,\n          rgba(34, 211, 238, 0.35)\n        );\n        transform: translateX(var(--hf-rgb-x, 0px));\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"demo\"\n      data-composition-id=\"directional-wipe-demo\"\n      data-start=\"0\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n      data-duration=\"5\"\n    >\n      <div class=\"demo-frame\">\n        <div class=\"hf-remocn-directional-wipe\">\n          <div class=\"scene from\">Before</div>\n          <div class=\"scene to\">Directional Wipe</div>\n          <div class=\"fx\"></div>\n          <div class=\"rgb\"></div>\n        </div>\n      </div>\n      <script>\n        const tl = gsap.timeline({ paused: true });\n        const startTime = 0.5;\n        tl.fromTo(\n          \".hf-remocn-directional-wipe .to\",\n          { \"--hf-clip-right\": \"100%\", \"--hf-to-x\": \"60px\", \"--hf-to-scale\": 1.04 },\n          {\n            \"--hf-clip-right\": \"0%\",\n            \"--hf-to-x\": \"0px\",\n            \"--hf-to-scale\": 1,\n            duration: 0.9,\n            ease: \"power3.inOut\",\n          },\n          startTime,\n        );\n        tl.to(\n          \".hf-remocn-directional-wipe .from\",\n          {\n            \"--hf-from-x\": \"-70px\",\n            \"--hf-from-scale\": 0.96,\n            \"--hf-from-blur\": \"5px\",\n            duration: 0.9,\n            ease: \"power3.inOut\",\n          },\n          startTime,\n        );\n        tl.fromTo(\n          \".hf-remocn-directional-wipe .fx\",\n          { \"--hf-fx-x\": \"-110%\" },\n          { \"--hf-fx-x\": \"110%\", duration: 0.58, ease: \"power2.inOut\" },\n          startTime + 0.18,\n        );\n        tl.fromTo(\n          \".hf-remocn-directional-wipe .rgb\",\n          { \"--hf-rgb-opacity\": 0, \"--hf-rgb-x\": \"-16px\" },\n          {\n            \"--hf-rgb-opacity\": 1,\n            \"--hf-rgb-x\": \"16px\",\n            repeat: 3,\n            yoyo: true,\n            duration: 0.07,\n            ease: \"steps(1)\",\n          },\n          startTime + 0.32,\n        );\n        tl.set({}, {}, 5);\n        window.__timelines = window.__timelines || {};\n        window.__timelines[\"directional-wipe-demo\"] = tl;\n      </script>\n    </div>\n  </body>\n</html>\n"}
\ No newline at end of file
+{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=1920, height=1080\" />\n    <title>Directional Wipe - Demo</title>\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      * {\n        box-sizing: border-box;\n      }\n      html,\n      body {\n        margin: 0;\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n      }\n      #demo {\n        width: 1920px;\n        height: 1080px;\n        display: grid;\n        place-items: center;\n        background: #f7f7f8;\n        font-family: Inter, system-ui, sans-serif;\n      }\n      .demo-frame {\n        display: grid;\n        place-items: center;\n        padding: 52px;\n        /* ponytail: scale wrapper only — GSAP targets live inside .hf-catalog-directional-wipe, not here */\n        transform: scale(1.65);\n      }\n      .hf-catalog-directional-wipe {\n        --hf-accent: var(--accent, rgba(255, 255, 255, 0.28));\n        --hf-l1: rgba(255, 255, 255, 0.72);\n        --hf-l3: rgba(255, 255, 255, 0.18);\n        --hf-l4: rgba(255, 255, 255, 0.08);\n        --hf-hair: rgba(255, 255, 255, 0.14);\n        --hf-ink: #111827;\n        --hf-muted: #6b7280;\n        --hf-surface: #ffffff;\n        color: var(--hf-ink);\n        font-family: Inter, system-ui, sans-serif;\n      }\n      .hf-catalog-directional-wipe {\n        position: relative;\n        width: 760px;\n        height: 428px;\n        overflow: hidden;\n        border-radius: 30px;\n        background: #111827;\n        box-shadow: 0 28px 80px rgba(15, 23, 42, 0.2);\n      }\n      .hf-catalog-directional-wipe .scene {\n        position: absolute;\n        inset: 0;\n        display: grid;\n        place-items: center;\n        font-weight: 900;\n        font-size: 58px;\n        letter-spacing: -0.05em;\n        color: #fff;\n      }\n      .hf-catalog-directional-wipe .from {\n        background:\n          repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 4px),\n          var(--hf-l4);\n        transform: translate(var(--hf-from-x, 0px), var(--hf-from-y, 0px))\n          scale(var(--hf-from-scale, 1));\n        filter: blur(var(--hf-from-blur, 0px));\n      }\n      .hf-catalog-directional-wipe .to {\n        background:\n          repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 4px),\n          var(--hf-l3);\n        box-shadow: inset 0 0 0 2px var(--hf-accent);\n        transform: translate(var(--hf-to-x, 0px), var(--hf-to-y, 0px)) scale(var(--hf-to-scale, 1));\n        clip-path: inset(\n          var(--hf-clip-top, 0%) var(--hf-clip-right, 100%) var(--hf-clip-bottom, 0%)\n            var(--hf-clip-left, 0%)\n        );\n      }\n      .hf-catalog-directional-wipe .fx {\n        position: absolute;\n        inset: 0;\n        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.75), transparent);\n        mix-blend-mode: screen;\n        transform: translateX(var(--hf-fx-x, -110%));\n      }\n      .hf-catalog-directional-wipe .rgb {\n        position: absolute;\n        inset: 0;\n        pointer-events: none;\n        opacity: var(--hf-rgb-opacity, 0);\n        background: linear-gradient(\n          90deg,\n          rgba(239, 68, 68, 0.35),\n          transparent,\n          rgba(34, 211, 238, 0.35)\n        );\n        transform: translateX(var(--hf-rgb-x, 0px));\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"demo\"\n      data-composition-id=\"directional-wipe-demo\"\n      data-start=\"0\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n      data-duration=\"5\"\n    >\n      <div class=\"demo-frame\">\n        <div class=\"hf-catalog-directional-wipe\">\n          <div class=\"scene from\">Before</div>\n          <div class=\"scene to\">Directional Wipe</div>\n          <div class=\"fx\"></div>\n          <div class=\"rgb\"></div>\n        </div>\n      </div>\n      <script>\n        const tl = gsap.timeline({ paused: true });\n        const startTime = 0.5;\n        tl.fromTo(\n          \".hf-catalog-directional-wipe .to\",\n          { \"--hf-clip-right\": \"100%\", \"--hf-to-x\": \"60px\", \"--hf-to-scale\": 1.04 },\n          {\n            \"--hf-clip-right\": \"0%\",\n            \"--hf-to-x\": \"0px\",\n            \"--hf-to-scale\": 1,\n            duration: 0.9,\n            ease: \"power3.inOut\",\n          },\n          startTime,\n        );\n        tl.to(\n          \".hf-catalog-directional-wipe .from\",\n          {\n            \"--hf-from-x\": \"-70px\",\n            \"--hf-from-scale\": 0.96,\n            \"--hf-from-blur\": \"5px\",\n            duration: 0.9,\n            ease: \"power3.inOut\",\n          },\n          startTime,\n        );\n        tl.fromTo(\n          \".hf-catalog-directional-wipe .fx\",\n          { \"--hf-fx-x\": \"-110%\" },\n          { \"--hf-fx-x\": \"110%\", duration: 0.58, ease: \"power2.inOut\" },\n          startTime + 0.18,\n        );\n        tl.fromTo(\n          \".hf-catalog-directional-wipe .rgb\",\n          { \"--hf-rgb-opacity\": 0, \"--hf-rgb-x\": \"-16px\" },\n          {\n            \"--hf-rgb-opacity\": 1,\n            \"--hf-rgb-x\": \"16px\",\n            repeat: 3,\n            yoyo: true,\n            duration: 0.07,\n            ease: \"steps(1)\",\n          },\n          startTime + 0.32,\n        );\n        tl.set({}, {}, 5);\n        window.__timelines = window.__timelines || {};\n        window.__timelines[\"directional-wipe-demo\"] = tl;\n      </script>\n    </div>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/docs/public/catalog/components/focus-blur-resolve.json b/docs/public/catalog/components/focus-blur-resolve.json
index 116eb949c1..08004e88bc 100644
--- a/docs/public/catalog/components/focus-blur-resolve.json
+++ b/docs/public/catalog/components/focus-blur-resolve.json
@@ -1 +1 @@
-{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=1920, height=1080\" />\n    <title>Focus Blur Resolve - Demo</title>\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      * {\n        box-sizing: border-box;\n      }\n      html,\n      body {\n        margin: 0;\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n      }\n      #demo {\n        width: 1920px;\n        height: 1080px;\n        display: grid;\n        place-items: center;\n        background: #f7f7f8;\n        font-family: Inter, system-ui, sans-serif;\n      }\n      .demo-frame {\n        display: grid;\n        place-items: center;\n        min-width: 900px;\n        min-height: 500px;\n        padding: 64px;\n        /* ponytail: scale wrapper (not a GSAP target) to fill ~65% of frame */\n        transform: scale(2.8);\n      }\n      .hf-remocn-focus-blur-resolve {\n        color: #18181b;\n        font-family: Inter, system-ui, sans-serif;\n        font-weight: 900;\n        letter-spacing: -0.04em;\n      }\n      .hf-remocn-focus-blur-resolve {\n        display: inline-flex;\n        gap: 12px;\n        font-size: 56px;\n        line-height: 1;\n      }\n      .hf-remocn-focus-blur-resolve span {\n        display: inline-block;\n        transform: translate(var(--hf-word-x, 0px), var(--hf-word-y, 0px))\n          scale(var(--hf-word-scale, 1));\n        filter: blur(var(--hf-word-blur, 0px));\n        will-change: transform, filter, opacity;\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"demo\"\n      data-composition-id=\"focus-blur-resolve-demo\"\n      data-start=\"0\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n      data-duration=\"5\"\n    >\n      <div class=\"demo-frame\">\n        <div class=\"hf-remocn-focus-blur-resolve\"><span>Crystal</span><span>clear</span></div>\n      </div>\n      <script>\n        const tl = gsap.timeline({ paused: true });\n        const startTime = 0.5;\n        tl.fromTo(\n          \".hf-remocn-focus-blur-resolve span\",\n          { opacity: 0, \"--hf-word-scale\": 1.08, \"--hf-word-blur\": \"16px\" },\n          {\n            opacity: 1,\n            \"--hf-word-scale\": 1,\n            \"--hf-word-blur\": \"0px\",\n            duration: 0.52,\n            stagger: 0.05,\n            ease: \"power3.out\",\n          },\n          startTime,\n        );\n        tl.set({}, {}, 5);\n        window.__timelines = window.__timelines || {};\n        window.__timelines[\"focus-blur-resolve-demo\"] = tl;\n      </script>\n    </div>\n  </body>\n</html>\n"}
\ No newline at end of file
+{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=1920, height=1080\" />\n    <title>Focus Blur Resolve - Demo</title>\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      * {\n        box-sizing: border-box;\n      }\n      html,\n      body {\n        margin: 0;\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n      }\n      #demo {\n        width: 1920px;\n        height: 1080px;\n        display: grid;\n        place-items: center;\n        background: #f7f7f8;\n        font-family: Inter, system-ui, sans-serif;\n      }\n      .demo-frame {\n        display: grid;\n        place-items: center;\n        min-width: 900px;\n        min-height: 500px;\n        padding: 64px;\n        /* ponytail: scale wrapper (not a GSAP target) to fill ~65% of frame */\n        transform: scale(2.8);\n      }\n      .hf-catalog-focus-blur-resolve {\n        color: #18181b;\n        font-family: Inter, system-ui, sans-serif;\n        font-weight: 900;\n        letter-spacing: -0.04em;\n      }\n      .hf-catalog-focus-blur-resolve {\n        display: inline-flex;\n        gap: 12px;\n        font-size: 56px;\n        line-height: 1;\n      }\n      .hf-catalog-focus-blur-resolve span {\n        display: inline-block;\n        transform: translate(var(--hf-word-x, 0px), var(--hf-word-y, 0px))\n          scale(var(--hf-word-scale, 1));\n        filter: blur(var(--hf-word-blur, 0px));\n        will-change: transform, filter, opacity;\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"demo\"\n      data-composition-id=\"focus-blur-resolve-demo\"\n      data-start=\"0\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n      data-duration=\"5\"\n    >\n      <div class=\"demo-frame\">\n        <div class=\"hf-catalog-focus-blur-resolve\"><span>Crystal</span><span>clear</span></div>\n      </div>\n      <script>\n        const tl = gsap.timeline({ paused: true });\n        const startTime = 0.5;\n        tl.fromTo(\n          \".hf-catalog-focus-blur-resolve span\",\n          { opacity: 0, \"--hf-word-scale\": 1.08, \"--hf-word-blur\": \"16px\" },\n          {\n            opacity: 1,\n            \"--hf-word-scale\": 1,\n            \"--hf-word-blur\": \"0px\",\n            duration: 0.52,\n            stagger: 0.05,\n            ease: \"power3.out\",\n          },\n          startTime,\n        );\n        tl.set({}, {}, 5);\n        window.__timelines = window.__timelines || {};\n        window.__timelines[\"focus-blur-resolve-demo\"] = tl;\n      </script>\n    </div>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/docs/public/catalog/components/line-by-line-slide.json b/docs/public/catalog/components/line-by-line-slide.json
index 6322081c64..33b0a73aed 100644
--- a/docs/public/catalog/components/line-by-line-slide.json
+++ b/docs/public/catalog/components/line-by-line-slide.json
@@ -1 +1 @@
-{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=1920, height=1080\" />\n    <title>Line-by-Line Slide - Demo</title>\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      * {\n        box-sizing: border-box;\n      }\n      html,\n      body {\n        margin: 0;\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n      }\n      #demo {\n        width: 1920px;\n        height: 1080px;\n        display: grid;\n        place-items: center;\n        background: #f7f7f8;\n        font-family: Inter, system-ui, sans-serif;\n      }\n      .demo-frame {\n        display: grid;\n        place-items: center;\n        min-width: 900px;\n        min-height: 500px;\n        padding: 64px;\n        /* ponytail: scale wrapper — not a GSAP target, so CSS transform is safe */\n        transform: scale(2.8);\n        transform-origin: center center;\n      }\n      .hf-remocn-line-by-line-slide {\n        color: #18181b;\n        font-family: Inter, system-ui, sans-serif;\n        font-weight: 900;\n        letter-spacing: -0.04em;\n      }\n      .hf-remocn-line-by-line-slide {\n        display: grid;\n        gap: 10px;\n        font-size: 64px;\n        line-height: 1.05;\n        overflow: hidden;\n      }\n      .hf-remocn-line-by-line-slide span {\n        display: block;\n        transform: translate(var(--hf-line-x, 0px), var(--hf-line-y, 0px));\n        filter: blur(var(--hf-line-blur, 0px));\n        will-change: transform, filter, opacity;\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"demo\"\n      data-composition-id=\"line-by-line-slide-demo\"\n      data-start=\"0\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n      data-duration=\"5\"\n    >\n      <div class=\"demo-frame\">\n        <div class=\"hf-remocn-line-by-line-slide\">\n          <span>Design faster</span><span>Render cleaner</span><span>Ship louder</span>\n        </div>\n      </div>\n      <script>\n        const tl = gsap.timeline({ paused: true });\n        const startTime = 0.5;\n        tl.fromTo(\n          \".hf-remocn-line-by-line-slide span\",\n          { opacity: 0, \"--hf-line-x\": \"-36px\", \"--hf-line-y\": \"18px\", \"--hf-line-blur\": \"6px\" },\n          {\n            opacity: 1,\n            \"--hf-line-x\": \"0px\",\n            \"--hf-line-y\": \"0px\",\n            \"--hf-line-blur\": \"0px\",\n            duration: 0.34,\n            stagger: 0.08,\n            ease: \"power3.out\",\n          },\n          startTime,\n        );\n        tl.set({}, {}, 5);\n        window.__timelines = window.__timelines || {};\n        window.__timelines[\"line-by-line-slide-demo\"] = tl;\n      </script>\n    </div>\n  </body>\n</html>\n"}
\ No newline at end of file
+{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=1920, height=1080\" />\n    <title>Line-by-Line Slide - Demo</title>\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      * {\n        box-sizing: border-box;\n      }\n      html,\n      body {\n        margin: 0;\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n      }\n      #demo {\n        width: 1920px;\n        height: 1080px;\n        display: grid;\n        place-items: center;\n        background: #f7f7f8;\n        font-family: Inter, system-ui, sans-serif;\n      }\n      .demo-frame {\n        display: grid;\n        place-items: center;\n        min-width: 900px;\n        min-height: 500px;\n        padding: 64px;\n        /* ponytail: scale wrapper — not a GSAP target, so CSS transform is safe */\n        transform: scale(2.8);\n        transform-origin: center center;\n      }\n      .hf-catalog-line-by-line-slide {\n        color: #18181b;\n        font-family: Inter, system-ui, sans-serif;\n        font-weight: 900;\n        letter-spacing: -0.04em;\n      }\n      .hf-catalog-line-by-line-slide {\n        display: grid;\n        gap: 10px;\n        font-size: 64px;\n        line-height: 1.05;\n        overflow: hidden;\n      }\n      .hf-catalog-line-by-line-slide span {\n        display: block;\n        transform: translate(var(--hf-line-x, 0px), var(--hf-line-y, 0px));\n        filter: blur(var(--hf-line-blur, 0px));\n        will-change: transform, filter, opacity;\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"demo\"\n      data-composition-id=\"line-by-line-slide-demo\"\n      data-start=\"0\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n      data-duration=\"5\"\n    >\n      <div class=\"demo-frame\">\n        <div class=\"hf-catalog-line-by-line-slide\">\n          <span>Design faster</span><span>Render cleaner</span><span>Ship louder</span>\n        </div>\n      </div>\n      <script>\n        const tl = gsap.timeline({ paused: true });\n        const startTime = 0.5;\n        tl.fromTo(\n          \".hf-catalog-line-by-line-slide span\",\n          { opacity: 0, \"--hf-line-x\": \"-36px\", \"--hf-line-y\": \"18px\", \"--hf-line-blur\": \"6px\" },\n          {\n            opacity: 1,\n            \"--hf-line-x\": \"0px\",\n            \"--hf-line-y\": \"0px\",\n            \"--hf-line-blur\": \"0px\",\n            duration: 0.34,\n            stagger: 0.08,\n            ease: \"power3.out\",\n          },\n          startTime,\n        );\n        tl.set({}, {}, 5);\n        window.__timelines = window.__timelines || {};\n        window.__timelines[\"line-by-line-slide-demo\"] = tl;\n      </script>\n    </div>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/docs/public/catalog/components/matrix-decode.json b/docs/public/catalog/components/matrix-decode.json
index 6771f16224..28847ed281 100644
--- a/docs/public/catalog/components/matrix-decode.json
+++ b/docs/public/catalog/components/matrix-decode.json
@@ -1 +1 @@
-{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=1920, height=1080\" />\n    <title>Matrix Decode - Demo</title>\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      * {\n        box-sizing: border-box;\n      }\n      html,\n      body {\n        margin: 0;\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n      }\n      #demo {\n        width: 1920px;\n        height: 1080px;\n        display: grid;\n        place-items: center;\n        background: #f4f4f5;\n        font-family: Inter, system-ui, sans-serif;\n      }\n      /* ponytail: scale on wrapper (not a GSAP target), zooms content ~3× for thumbnail legibility */\n      .demo-frame {\n        display: grid;\n        place-items: center;\n        gap: 32px;\n        padding: 72px 96px;\n        background: #18181b;\n        border-radius: 20px;\n        box-shadow: 0 32px 80px rgba(0, 0, 0, 0.22);\n        transform: scale(3.2);\n        transform-origin: center center;\n      }\n      .demo-label {\n        font-size: 13px;\n        font-weight: 500;\n        letter-spacing: 0.12em;\n        text-transform: uppercase;\n        color: #71717a;\n      }\n      .hf-remocn-matrix-decode {\n        display: inline-flex;\n        gap: 4px;\n        font:\n          700 52px/1 ui-monospace,\n          SFMono-Regular,\n          Menlo,\n          monospace;\n        color: #4ade80;\n        text-shadow: 0 0 24px rgba(74, 222, 128, 0.45);\n      }\n      .hf-remocn-matrix-decode span {\n        display: inline-block;\n        min-width: 0.64em;\n        opacity: var(--hf-matrix-opacity, 1);\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"demo\"\n      data-composition-id=\"matrix-decode-demo\"\n      data-start=\"0\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n      data-duration=\"5\"\n    >\n      <div class=\"demo-frame\">\n        <div class=\"demo-label\">Matrix Decode</div>\n        <div class=\"hf-remocn-matrix-decode\" data-final=\"HYPERFRAMES\">\n          <span>0</span><span>0</span><span>0</span><span>0</span><span>0</span><span>0</span\n          ><span>0</span><span>0</span><span>0</span><span>0</span>\n        </div>\n      </div>\n      <script>\n        const tl = gsap.timeline({ paused: true });\n        const startTime = 0.5;\n        tl.fromTo(\n          \".hf-remocn-matrix-decode span\",\n          { opacity: 0, y: 12 },\n          { opacity: 1, y: 0, duration: 0.18, stagger: 0.035, ease: \"power2.out\" },\n          startTime,\n        );\n        tl.set({}, {}, 5);\n        window.__timelines = window.__timelines || {};\n        window.__timelines[\"matrix-decode-demo\"] = tl;\n      </script>\n    </div>\n  </body>\n</html>\n"}
\ No newline at end of file
+{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=1920, height=1080\" />\n    <title>Matrix Decode - Demo</title>\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      * {\n        box-sizing: border-box;\n      }\n      html,\n      body {\n        margin: 0;\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n      }\n      #demo {\n        width: 1920px;\n        height: 1080px;\n        display: grid;\n        place-items: center;\n        background: #f4f4f5;\n        font-family: Inter, system-ui, sans-serif;\n      }\n      /* ponytail: scale on wrapper (not a GSAP target), zooms content ~3× for thumbnail legibility */\n      .demo-frame {\n        display: grid;\n        place-items: center;\n        gap: 32px;\n        padding: 72px 96px;\n        background: #18181b;\n        border-radius: 20px;\n        box-shadow: 0 32px 80px rgba(0, 0, 0, 0.22);\n        transform: scale(3.2);\n        transform-origin: center center;\n      }\n      .demo-label {\n        font-size: 13px;\n        font-weight: 500;\n        letter-spacing: 0.12em;\n        text-transform: uppercase;\n        color: #71717a;\n      }\n      .hf-catalog-matrix-decode {\n        display: inline-flex;\n        gap: 4px;\n        font:\n          700 52px/1 ui-monospace,\n          SFMono-Regular,\n          Menlo,\n          monospace;\n        color: #4ade80;\n        text-shadow: 0 0 24px rgba(74, 222, 128, 0.45);\n      }\n      .hf-catalog-matrix-decode span {\n        display: inline-block;\n        min-width: 0.64em;\n        opacity: var(--hf-matrix-opacity, 1);\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"demo\"\n      data-composition-id=\"matrix-decode-demo\"\n      data-start=\"0\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n      data-duration=\"5\"\n    >\n      <div class=\"demo-frame\">\n        <div class=\"demo-label\">Matrix Decode</div>\n        <div class=\"hf-catalog-matrix-decode\" data-final=\"HYPERFRAMES\">\n          <span>0</span><span>0</span><span>0</span><span>0</span><span>0</span><span>0</span\n          ><span>0</span><span>0</span><span>0</span><span>0</span>\n        </div>\n      </div>\n      <script>\n        const tl = gsap.timeline({ paused: true });\n        const startTime = 0.5;\n        tl.fromTo(\n          \".hf-catalog-matrix-decode span\",\n          { opacity: 0, y: 12 },\n          { opacity: 1, y: 0, duration: 0.18, stagger: 0.035, ease: \"power2.out\" },\n          startTime,\n        );\n        tl.set({}, {}, 5);\n        window.__timelines = window.__timelines || {};\n        window.__timelines[\"matrix-decode-demo\"] = tl;\n      </script>\n    </div>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/docs/public/catalog/components/mesh-gradient-bg.json b/docs/public/catalog/components/mesh-gradient-bg.json
index cba358d83e..bc5287ceed 100644
--- a/docs/public/catalog/components/mesh-gradient-bg.json
+++ b/docs/public/catalog/components/mesh-gradient-bg.json
@@ -1 +1 @@
-{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=1920, height=1080\" />\n    <title>Mesh Gradient Background - Demo</title>\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      * {\n        box-sizing: border-box;\n      }\n      html,\n      body {\n        margin: 0;\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n      }\n      #demo {\n        width: 1920px;\n        height: 1080px;\n        display: grid;\n        place-items: center;\n        background: #f7f7f8;\n        font-family: Inter, system-ui, sans-serif;\n      }\n      .demo-frame {\n        display: grid;\n        place-items: center;\n        padding: 52px;\n        transform: scale(1.75);\n      }\n      .hf-remocn-mesh-gradient-bg {\n        --hf-accent: #2563eb;\n        --hf-ink: #111827;\n        --hf-muted: #6b7280;\n        --hf-surface: #ffffff;\n        color: var(--hf-ink);\n        font-family: Inter, system-ui, sans-serif;\n      }\n      .hf-remocn-mesh-gradient-bg {\n        position: relative;\n        width: 760px;\n        height: 428px;\n        overflow: hidden;\n        border-radius: 30px;\n        background: #080b12;\n        box-shadow: 0 28px 80px rgba(15, 23, 42, 0.2);\n      }\n      .hf-remocn-mesh-gradient-bg .mesh {\n        position: absolute;\n        inset: -22%;\n        filter: blur(44px);\n        opacity: 0.88;\n        background:\n          radial-gradient(\n            circle at var(--hf-x1, 20%) var(--hf-y1, 30%),\n            #60a5fa 0 18%,\n            transparent 32%\n          ),\n          radial-gradient(\n            circle at var(--hf-x2, 76%) var(--hf-y2, 52%),\n            #f472b6 0 16%,\n            transparent 34%\n          ),\n          radial-gradient(\n            circle at var(--hf-x3, 46%) var(--hf-y3, 78%),\n            #34d399 0 18%,\n            transparent 34%\n          );\n      }\n      .hf-remocn-mesh-gradient-bg .card {\n        position: absolute;\n        inset: 74px 92px;\n        border: 1px solid rgba(255, 255, 255, 0.16);\n        border-radius: 26px;\n        background: rgba(255, 255, 255, 0.08);\n        color: #fff;\n        display: grid;\n        place-items: center;\n        text-align: center;\n        overflow: hidden;\n      }\n      .hf-remocn-mesh-gradient-bg .spot {\n        position: absolute;\n        width: 260px;\n        height: 260px;\n        border-radius: 50%;\n        background: radial-gradient(circle, rgba(255, 255, 255, 0.5), transparent 65%);\n        transform: translate(var(--hf-spot-x, 0px), var(--hf-spot-y, 0px));\n        mix-blend-mode: screen;\n      }\n      .hf-remocn-mesh-gradient-bg .particle {\n        position: absolute;\n        left: 50%;\n        top: 54%;\n        width: 12px;\n        height: 20px;\n        border-radius: 3px;\n        background: var(--c);\n        transform: translate(var(--hf-px, 0px), var(--hf-py, 0px)) rotate(var(--hf-pr, 0deg));\n        opacity: var(--hf-po, 0);\n      }\n      .hf-remocn-mesh-gradient-bg h3 {\n        margin: 0;\n        font-size: 44px;\n        letter-spacing: -0.04em;\n      }\n      .hf-remocn-mesh-gradient-bg p {\n        margin: 8px 0 0;\n        font-size: 18px;\n        color: rgba(255, 255, 255, 0.7);\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"demo\"\n      data-composition-id=\"mesh-gradient-bg-demo\"\n      data-start=\"0\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n      data-duration=\"5\"\n    >\n      <div class=\"demo-frame\">\n        <div class=\"hf-remocn-mesh-gradient-bg\">\n          <div class=\"mesh\"></div>\n          <div class=\"card\">\n            <div class=\"spot\"></div>\n            <div>\n              <h3>Mesh Gradient Background</h3>\n              <p>A render-safe mesh gradient using animated radial layers.</p>\n            </div>\n          </div>\n        </div>\n      </div>\n      <script>\n        const tl = gsap.timeline({ paused: true });\n        const startTime = 0.5;\n        tl.fromTo(\n          \".hf-remocn-mesh-gradient-bg .mesh\",\n          {\n            \"--hf-x1\": \"18%\",\n            \"--hf-y1\": \"28%\",\n            \"--hf-x2\": \"78%\",\n            \"--hf-y2\": \"46%\",\n            \"--hf-x3\": \"44%\",\n            \"--hf-y3\": \"80%\",\n          },\n          {\n            \"--hf-x1\": \"34%\",\n            \"--hf-y1\": \"42%\",\n            \"--hf-x2\": \"62%\",\n            \"--hf-y2\": \"60%\",\n            \"--hf-x3\": \"58%\",\n            \"--hf-y3\": \"64%\",\n            duration: 4,\n            ease: \"sine.inOut\",\n          },\n          startTime,\n        );\n        tl.fromTo(\n          \".hf-remocn-mesh-gradient-bg .spot\",\n          { \"--hf-spot-x\": \"-120px\", \"--hf-spot-y\": \"-70px\" },\n          { \"--hf-spot-x\": \"190px\", \"--hf-spot-y\": \"90px\", duration: 3, ease: \"sine.inOut\" },\n          startTime,\n        );\n        const particles_mesh_gradient_bg = gsap.utils.toArray(\n          \".hf-remocn-mesh-gradient-bg .particle\",\n        );\n        if (particles_mesh_gradient_bg.length) {\n          tl.fromTo(\n            particles_mesh_gradient_bg,\n            { \"--hf-po\": 0, \"--hf-px\": \"0px\", \"--hf-py\": \"0px\", \"--hf-pr\": \"0deg\" },\n            {\n              \"--hf-po\": 1,\n              \"--hf-px\": (i) => Math.cos(i * 0.83) * 250 + \"px\",\n              \"--hf-py\": (i) => -120 - Math.sin(i * 0.61) * 120 + \"px\",\n              \"--hf-pr\": (i) => 180 + i * 37 + \"deg\",\n              duration: 0.8,\n              stagger: 0.015,\n              ease: \"power2.out\",\n            },\n            startTime + 0.2,\n          );\n        }\n        tl.set({}, {}, 5);\n        window.__timelines = window.__timelines || {};\n        window.__timelines[\"mesh-gradient-bg-demo\"] = tl;\n      </script>\n    </div>\n  </body>\n</html>\n"}
\ No newline at end of file
+{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=1920, height=1080\" />\n    <title>Mesh Gradient Background - Demo</title>\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      * {\n        box-sizing: border-box;\n      }\n      html,\n      body {\n        margin: 0;\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n      }\n      #demo {\n        width: 1920px;\n        height: 1080px;\n        display: grid;\n        place-items: center;\n        background: #f7f7f8;\n        font-family: Inter, system-ui, sans-serif;\n      }\n      .demo-frame {\n        display: grid;\n        place-items: center;\n        padding: 52px;\n        transform: scale(1.75);\n      }\n      .hf-catalog-mesh-gradient-bg {\n        --hf-accent: #2563eb;\n        --hf-ink: #111827;\n        --hf-muted: #6b7280;\n        --hf-surface: #ffffff;\n        color: var(--hf-ink);\n        font-family: Inter, system-ui, sans-serif;\n      }\n      .hf-catalog-mesh-gradient-bg {\n        position: relative;\n        width: 760px;\n        height: 428px;\n        overflow: hidden;\n        border-radius: 30px;\n        background: #080b12;\n        box-shadow: 0 28px 80px rgba(15, 23, 42, 0.2);\n      }\n      .hf-catalog-mesh-gradient-bg .mesh {\n        position: absolute;\n        inset: -22%;\n        filter: blur(44px);\n        opacity: 0.88;\n        background:\n          radial-gradient(\n            circle at var(--hf-x1, 20%) var(--hf-y1, 30%),\n            #60a5fa 0 18%,\n            transparent 32%\n          ),\n          radial-gradient(\n            circle at var(--hf-x2, 76%) var(--hf-y2, 52%),\n            #f472b6 0 16%,\n            transparent 34%\n          ),\n          radial-gradient(\n            circle at var(--hf-x3, 46%) var(--hf-y3, 78%),\n            #34d399 0 18%,\n            transparent 34%\n          );\n      }\n      .hf-catalog-mesh-gradient-bg .card {\n        position: absolute;\n        inset: 74px 92px;\n        border: 1px solid rgba(255, 255, 255, 0.16);\n        border-radius: 26px;\n        background: rgba(255, 255, 255, 0.08);\n        color: #fff;\n        display: grid;\n        place-items: center;\n        text-align: center;\n        overflow: hidden;\n      }\n      .hf-catalog-mesh-gradient-bg .spot {\n        position: absolute;\n        width: 260px;\n        height: 260px;\n        border-radius: 50%;\n        background: radial-gradient(circle, rgba(255, 255, 255, 0.5), transparent 65%);\n        transform: translate(var(--hf-spot-x, 0px), var(--hf-spot-y, 0px));\n        mix-blend-mode: screen;\n      }\n      .hf-catalog-mesh-gradient-bg .particle {\n        position: absolute;\n        left: 50%;\n        top: 54%;\n        width: 12px;\n        height: 20px;\n        border-radius: 3px;\n        background: var(--c);\n        transform: translate(var(--hf-px, 0px), var(--hf-py, 0px)) rotate(var(--hf-pr, 0deg));\n        opacity: var(--hf-po, 0);\n      }\n      .hf-catalog-mesh-gradient-bg h3 {\n        margin: 0;\n        font-size: 44px;\n        letter-spacing: -0.04em;\n      }\n      .hf-catalog-mesh-gradient-bg p {\n        margin: 8px 0 0;\n        font-size: 18px;\n        color: rgba(255, 255, 255, 0.7);\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"demo\"\n      data-composition-id=\"mesh-gradient-bg-demo\"\n      data-start=\"0\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n      data-duration=\"5\"\n    >\n      <div class=\"demo-frame\">\n        <div class=\"hf-catalog-mesh-gradient-bg\">\n          <div class=\"mesh\"></div>\n          <div class=\"card\">\n            <div class=\"spot\"></div>\n            <div>\n              <h3>Mesh Gradient Background</h3>\n              <p>A render-safe mesh gradient using animated radial layers.</p>\n            </div>\n          </div>\n        </div>\n      </div>\n      <script>\n        const tl = gsap.timeline({ paused: true });\n        const startTime = 0.5;\n        tl.fromTo(\n          \".hf-catalog-mesh-gradient-bg .mesh\",\n          {\n            \"--hf-x1\": \"18%\",\n            \"--hf-y1\": \"28%\",\n            \"--hf-x2\": \"78%\",\n            \"--hf-y2\": \"46%\",\n            \"--hf-x3\": \"44%\",\n            \"--hf-y3\": \"80%\",\n          },\n          {\n            \"--hf-x1\": \"34%\",\n            \"--hf-y1\": \"42%\",\n            \"--hf-x2\": \"62%\",\n            \"--hf-y2\": \"60%\",\n            \"--hf-x3\": \"58%\",\n            \"--hf-y3\": \"64%\",\n            duration: 4,\n            ease: \"sine.inOut\",\n          },\n          startTime,\n        );\n        tl.fromTo(\n          \".hf-catalog-mesh-gradient-bg .spot\",\n          { \"--hf-spot-x\": \"-120px\", \"--hf-spot-y\": \"-70px\" },\n          { \"--hf-spot-x\": \"190px\", \"--hf-spot-y\": \"90px\", duration: 3, ease: \"sine.inOut\" },\n          startTime,\n        );\n        const particles_mesh_gradient_bg = gsap.utils.toArray(\n          \".hf-catalog-mesh-gradient-bg .particle\",\n        );\n        if (particles_mesh_gradient_bg.length) {\n          tl.fromTo(\n            particles_mesh_gradient_bg,\n            { \"--hf-po\": 0, \"--hf-px\": \"0px\", \"--hf-py\": \"0px\", \"--hf-pr\": \"0deg\" },\n            {\n              \"--hf-po\": 1,\n              \"--hf-px\": (i) => Math.cos(i * 0.83) * 250 + \"px\",\n              \"--hf-py\": (i) => -120 - Math.sin(i * 0.61) * 120 + \"px\",\n              \"--hf-pr\": (i) => 180 + i * 37 + \"deg\",\n              duration: 0.8,\n              stagger: 0.015,\n              ease: \"power2.out\",\n            },\n            startTime + 0.2,\n          );\n        }\n        tl.set({}, {}, 5);\n        window.__timelines = window.__timelines || {};\n        window.__timelines[\"mesh-gradient-bg-demo\"] = tl;\n      </script>\n    </div>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/docs/public/catalog/components/per-word-crossfade.json b/docs/public/catalog/components/per-word-crossfade.json
index f43c511bc3..953fc060ca 100644
--- a/docs/public/catalog/components/per-word-crossfade.json
+++ b/docs/public/catalog/components/per-word-crossfade.json
@@ -1 +1 @@
-{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=1920, height=1080\" />\n    <title>Per-Word Crossfade - Demo</title>\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      * {\n        box-sizing: border-box;\n      }\n      html,\n      body {\n        margin: 0;\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n      }\n      #demo {\n        width: 1920px;\n        height: 1080px;\n        display: grid;\n        place-items: center;\n        background: #fafafa;\n        font-family: Inter, system-ui, sans-serif;\n      }\n      .demo-frame {\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        justify-content: center;\n        gap: 40px;\n        width: 1920px;\n        height: 1080px;\n        padding: 120px 160px;\n      }\n      /* outgoing phrase — static, fades out */\n      .phrase-out {\n        display: inline-flex;\n        gap: 28px;\n        font-size: 128px;\n        font-weight: 900;\n        letter-spacing: -0.04em;\n        line-height: 1;\n        color: #71717a;\n        font-family: Inter, system-ui, sans-serif;\n        position: relative;\n      }\n      .phrase-out span {\n        display: inline-block;\n        will-change: opacity;\n      }\n      /* incoming phrase — the GSAP-animated element */\n      .hf-remocn-per-word-crossfade {\n        color: #18181b;\n        font-family: Inter, system-ui, sans-serif;\n        font-weight: 900;\n        letter-spacing: -0.04em;\n      }\n      .hf-remocn-per-word-crossfade {\n        display: inline-flex;\n        gap: 28px;\n        font-size: 128px;\n        line-height: 1;\n      }\n      .hf-remocn-per-word-crossfade span {\n        display: inline-block;\n        transform: translate(var(--hf-word-x, 0px), var(--hf-word-y, 0px))\n          scale(var(--hf-word-scale, 1));\n        filter: blur(var(--hf-word-blur, 0px));\n        will-change: transform, filter, opacity;\n      }\n      /* label */\n      .demo-label {\n        font-size: 26px;\n        font-weight: 500;\n        color: #a1a1aa;\n        letter-spacing: 0.08em;\n        text-transform: uppercase;\n        margin-top: 24px;\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"demo\"\n      data-composition-id=\"per-word-crossfade-demo\"\n      data-start=\"0\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n      data-duration=\"5\"\n    >\n      <div class=\"demo-frame\">\n        <!-- outgoing phrase: fades out word-by-word -->\n        <div class=\"phrase-out\">\n          <span>Write</span><span>once</span><span>publish</span><span>anywhere</span>\n        </div>\n        <!-- incoming phrase: per-word crossfade in -->\n        <div class=\"hf-remocn-per-word-crossfade\">\n          <span>Create</span><span>once</span><span>reuse</span><span>everywhere</span>\n        </div>\n        <div class=\"demo-label\">per-word crossfade</div>\n      </div>\n      <script>\n        const tl = gsap.timeline({ paused: true });\n        const startTime = 0.5;\n\n        // outgoing phrase fades out word-by-word\n        tl.to(\n          \".phrase-out span\",\n          {\n            opacity: 0,\n            duration: 0.25,\n            stagger: 0.055,\n            ease: \"power2.in\",\n          },\n          startTime,\n        );\n\n        // incoming phrase fades in word-by-word (the named component)\n        tl.fromTo(\n          \".hf-remocn-per-word-crossfade span\",\n          { opacity: 0, \"--hf-word-y\": \"22px\", \"--hf-word-scale\": 0.92, \"--hf-word-blur\": \"5px\" },\n          {\n            opacity: 1,\n            \"--hf-word-y\": \"0px\",\n            \"--hf-word-scale\": 1,\n            \"--hf-word-blur\": \"0px\",\n            duration: 0.3,\n            stagger: 0.055,\n            ease: \"power3.out\",\n          },\n          startTime + 0.1,\n        );\n\n        tl.set({}, {}, 5);\n        window.__timelines = window.__timelines || {};\n        window.__timelines[\"per-word-crossfade-demo\"] = tl;\n      </script>\n    </div>\n  </body>\n</html>\n"}
\ No newline at end of file
+{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=1920, height=1080\" />\n    <title>Per-Word Crossfade - Demo</title>\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      * {\n        box-sizing: border-box;\n      }\n      html,\n      body {\n        margin: 0;\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n      }\n      #demo {\n        width: 1920px;\n        height: 1080px;\n        display: grid;\n        place-items: center;\n        background: #fafafa;\n        font-family: Inter, system-ui, sans-serif;\n      }\n      .demo-frame {\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        justify-content: center;\n        gap: 40px;\n        width: 1920px;\n        height: 1080px;\n        padding: 120px 160px;\n      }\n      /* outgoing phrase — static, fades out */\n      .phrase-out {\n        display: inline-flex;\n        gap: 28px;\n        font-size: 128px;\n        font-weight: 900;\n        letter-spacing: -0.04em;\n        line-height: 1;\n        color: #71717a;\n        font-family: Inter, system-ui, sans-serif;\n        position: relative;\n      }\n      .phrase-out span {\n        display: inline-block;\n        will-change: opacity;\n      }\n      /* incoming phrase — the GSAP-animated element */\n      .hf-catalog-per-word-crossfade {\n        color: #18181b;\n        font-family: Inter, system-ui, sans-serif;\n        font-weight: 900;\n        letter-spacing: -0.04em;\n      }\n      .hf-catalog-per-word-crossfade {\n        display: inline-flex;\n        gap: 28px;\n        font-size: 128px;\n        line-height: 1;\n      }\n      .hf-catalog-per-word-crossfade span {\n        display: inline-block;\n        transform: translate(var(--hf-word-x, 0px), var(--hf-word-y, 0px))\n          scale(var(--hf-word-scale, 1));\n        filter: blur(var(--hf-word-blur, 0px));\n        will-change: transform, filter, opacity;\n      }\n      /* label */\n      .demo-label {\n        font-size: 26px;\n        font-weight: 500;\n        color: #a1a1aa;\n        letter-spacing: 0.08em;\n        text-transform: uppercase;\n        margin-top: 24px;\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"demo\"\n      data-composition-id=\"per-word-crossfade-demo\"\n      data-start=\"0\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n      data-duration=\"5\"\n    >\n      <div class=\"demo-frame\">\n        <!-- outgoing phrase: fades out word-by-word -->\n        <div class=\"phrase-out\">\n          <span>Write</span><span>once</span><span>publish</span><span>anywhere</span>\n        </div>\n        <!-- incoming phrase: per-word crossfade in -->\n        <div class=\"hf-catalog-per-word-crossfade\">\n          <span>Create</span><span>once</span><span>reuse</span><span>everywhere</span>\n        </div>\n        <div class=\"demo-label\">per-word crossfade</div>\n      </div>\n      <script>\n        const tl = gsap.timeline({ paused: true });\n        const startTime = 0.5;\n\n        // outgoing phrase fades out word-by-word\n        tl.to(\n          \".phrase-out span\",\n          {\n            opacity: 0,\n            duration: 0.25,\n            stagger: 0.055,\n            ease: \"power2.in\",\n          },\n          startTime,\n        );\n\n        // incoming phrase fades in word-by-word (the named component)\n        tl.fromTo(\n          \".hf-catalog-per-word-crossfade span\",\n          { opacity: 0, \"--hf-word-y\": \"22px\", \"--hf-word-scale\": 0.92, \"--hf-word-blur\": \"5px\" },\n          {\n            opacity: 1,\n            \"--hf-word-y\": \"0px\",\n            \"--hf-word-scale\": 1,\n            \"--hf-word-blur\": \"0px\",\n            duration: 0.3,\n            stagger: 0.055,\n            ease: \"power3.out\",\n          },\n          startTime + 0.1,\n        );\n\n        tl.set({}, {}, 5);\n        window.__timelines = window.__timelines || {};\n        window.__timelines[\"per-word-crossfade-demo\"] = tl;\n      </script>\n    </div>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/docs/public/catalog/components/perspective-marquee.json b/docs/public/catalog/components/perspective-marquee.json
index 205077ecb5..5c74fd5862 100644
--- a/docs/public/catalog/components/perspective-marquee.json
+++ b/docs/public/catalog/components/perspective-marquee.json
@@ -1 +1 @@
-{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=1920, height=1080\" />\n    <title>Perspective Marquee - Demo</title>\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      * {\n        box-sizing: border-box;\n      }\n      html,\n      body {\n        margin: 0;\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n      }\n      #demo {\n        width: 1920px;\n        height: 1080px;\n        display: grid;\n        place-items: center;\n        background: #f7f7f8;\n        font-family: Inter, system-ui, sans-serif;\n      }\n      .demo-frame {\n        display: grid;\n        place-items: center;\n        /* ponytail: scale on wrapper — GSAP only targets the inner div, so CSS transform is safe here */\n        transform: scale(3);\n      }\n      .hf-remocn-perspective-marquee {\n        color: #18181b;\n        font-family: Inter, system-ui, sans-serif;\n        font-weight: 900;\n        letter-spacing: -0.04em;\n      }\n      .hf-remocn-perspective-marquee {\n        width: 580px;\n        perspective: 900px;\n        overflow: hidden;\n        transform: rotateX(18deg);\n      }\n      .hf-remocn-perspective-marquee div {\n        display: inline-flex;\n        gap: 22px;\n        white-space: nowrap;\n        transform: translateX(var(--hf-marquee-x, 0px));\n      }\n      .hf-remocn-perspective-marquee span {\n        padding: 12px 18px;\n        border-radius: 999px;\n        background: #18181b;\n        color: #fff;\n        font-size: 28px;\n        box-shadow: 0 18px 44px rgba(24, 24, 27, 0.18);\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"demo\"\n      data-composition-id=\"perspective-marquee-demo\"\n      data-start=\"0\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n      data-duration=\"5\"\n    >\n      <div class=\"demo-frame\">\n        <div class=\"hf-remocn-perspective-marquee\">\n          <div>\n            <span>COMPONENTS</span><span>PRIMITIVES</span><span>TRANSITIONS</span><span>AGENTS</span\n            ><span>COMPONENTS</span><span>PRIMITIVES</span><span>TRANSITIONS</span\n            ><span>AGENTS</span>\n          </div>\n        </div>\n      </div>\n      <script>\n        const tl = gsap.timeline({ paused: true });\n        const startTime = 0.5;\n        tl.fromTo(\n          \".hf-remocn-perspective-marquee div\",\n          { \"--hf-marquee-x\": \"0px\" },\n          { \"--hf-marquee-x\": \"-360px\", duration: 4.5, ease: \"none\" },\n          startTime,\n        );\n        tl.set({}, {}, 5);\n        window.__timelines = window.__timelines || {};\n        window.__timelines[\"perspective-marquee-demo\"] = tl;\n      </script>\n    </div>\n  </body>\n</html>\n"}
\ No newline at end of file
+{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=1920, height=1080\" />\n    <title>Perspective Marquee - Demo</title>\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      * {\n        box-sizing: border-box;\n      }\n      html,\n      body {\n        margin: 0;\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n      }\n      #demo {\n        width: 1920px;\n        height: 1080px;\n        display: grid;\n        place-items: center;\n        background: #f7f7f8;\n        font-family: Inter, system-ui, sans-serif;\n      }\n      .demo-frame {\n        display: grid;\n        place-items: center;\n        /* ponytail: scale on wrapper — GSAP only targets the inner div, so CSS transform is safe here */\n        transform: scale(3);\n      }\n      .hf-catalog-perspective-marquee {\n        color: #18181b;\n        font-family: Inter, system-ui, sans-serif;\n        font-weight: 900;\n        letter-spacing: -0.04em;\n      }\n      .hf-catalog-perspective-marquee {\n        width: 580px;\n        perspective: 900px;\n        overflow: hidden;\n        transform: rotateX(18deg);\n      }\n      .hf-catalog-perspective-marquee div {\n        display: inline-flex;\n        gap: 22px;\n        white-space: nowrap;\n        transform: translateX(var(--hf-marquee-x, 0px));\n      }\n      .hf-catalog-perspective-marquee span {\n        padding: 12px 18px;\n        border-radius: 999px;\n        background: #18181b;\n        color: #fff;\n        font-size: 28px;\n        box-shadow: 0 18px 44px rgba(24, 24, 27, 0.18);\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"demo\"\n      data-composition-id=\"perspective-marquee-demo\"\n      data-start=\"0\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n      data-duration=\"5\"\n    >\n      <div class=\"demo-frame\">\n        <div class=\"hf-catalog-perspective-marquee\">\n          <div>\n            <span>COMPONENTS</span><span>PRIMITIVES</span><span>TRANSITIONS</span><span>AGENTS</span\n            ><span>COMPONENTS</span><span>PRIMITIVES</span><span>TRANSITIONS</span\n            ><span>AGENTS</span>\n          </div>\n        </div>\n      </div>\n      <script>\n        const tl = gsap.timeline({ paused: true });\n        const startTime = 0.5;\n        tl.fromTo(\n          \".hf-catalog-perspective-marquee div\",\n          { \"--hf-marquee-x\": \"0px\" },\n          { \"--hf-marquee-x\": \"-360px\", duration: 4.5, ease: \"none\" },\n          startTime,\n        );\n        tl.set({}, {}, 5);\n        window.__timelines = window.__timelines || {};\n        window.__timelines[\"perspective-marquee-demo\"] = tl;\n      </script>\n    </div>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/docs/public/catalog/components/rgb-glitch-text.json b/docs/public/catalog/components/rgb-glitch-text.json
index c4f8255855..21f12544db 100644
--- a/docs/public/catalog/components/rgb-glitch-text.json
+++ b/docs/public/catalog/components/rgb-glitch-text.json
@@ -1 +1 @@
-{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=1920, height=1080\" />\n    <title>RGB Glitch Text - Demo</title>\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      * {\n        box-sizing: border-box;\n      }\n      html,\n      body {\n        margin: 0;\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n      }\n      #demo {\n        width: 1920px;\n        height: 1080px;\n        display: grid;\n        place-items: center;\n        background: #09090b;\n        font-family: Inter, system-ui, sans-serif;\n      }\n      .demo-frame {\n        display: grid;\n        place-items: center;\n        gap: 32px;\n        padding: 64px;\n        zoom: 0.28;\n      }\n      /* ponytail: scale-up via font-size — GSAP only touches CSS vars, not transform */\n      .hf-remocn-rgb-glitch-text {\n        color: #fafafa;\n        font-family: Inter, system-ui, sans-serif;\n        font-weight: 900;\n        letter-spacing: -0.04em;\n      }\n      .hf-remocn-rgb-glitch-text {\n        position: relative;\n        width: 1120px;\n        height: 200px;\n        font-size: 192px;\n        line-height: 1;\n      }\n      .hf-remocn-rgb-glitch-text span,\n      .hf-remocn-rgb-glitch-text strong {\n        position: absolute;\n        inset: 0;\n      }\n      .hf-remocn-rgb-glitch-text span:first-child {\n        color: #ef4444;\n        mix-blend-mode: screen;\n        transform: translateX(var(--hf-glitch-red, 0px));\n      }\n      .hf-remocn-rgb-glitch-text span:nth-child(2) {\n        color: #22d3ee;\n        mix-blend-mode: screen;\n        transform: translateX(var(--hf-glitch-blue, 0px));\n      }\n      .hf-remocn-rgb-glitch-text strong {\n        color: #fafafa;\n      }\n      .demo-label {\n        font-size: 24px;\n        font-weight: 500;\n        color: #52525b;\n        letter-spacing: 0.12em;\n        text-transform: uppercase;\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"demo\"\n      data-composition-id=\"rgb-glitch-text-demo\"\n      data-start=\"0\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n      data-duration=\"5\"\n    >\n      <div class=\"demo-frame\">\n        <div class=\"hf-remocn-rgb-glitch-text\">\n          <span>GLITCH</span><span>GLITCH</span><strong>GLITCH</strong>\n        </div>\n        <div class=\"demo-label\">RGB Glitch Text</div>\n      </div>\n      <script>\n        const tl = gsap.timeline({ paused: true });\n        const startTime = 0.5;\n        tl.to(\".hf-remocn-rgb-glitch-text\", { opacity: 1, duration: 0.01 }, startTime);\n        tl.to(\n          \".hf-remocn-rgb-glitch-text\",\n          {\n            \"--hf-glitch-red\": \"-20px\",\n            \"--hf-glitch-blue\": \"20px\",\n            duration: 0.06,\n            repeat: 5,\n            yoyo: true,\n            ease: \"steps(1)\",\n          },\n          startTime + 0.1,\n        );\n        tl.set({}, {}, 5);\n        window.__timelines = window.__timelines || {};\n        window.__timelines[\"rgb-glitch-text-demo\"] = tl;\n      </script>\n    </div>\n  </body>\n</html>\n"}
\ No newline at end of file
+{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=1920, height=1080\" />\n    <title>RGB Glitch Text - Demo</title>\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      * {\n        box-sizing: border-box;\n      }\n      html,\n      body {\n        margin: 0;\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n      }\n      #demo {\n        width: 1920px;\n        height: 1080px;\n        display: grid;\n        place-items: center;\n        background: #09090b;\n        font-family: Inter, system-ui, sans-serif;\n      }\n      .demo-frame {\n        display: grid;\n        place-items: center;\n        gap: 32px;\n        padding: 64px;\n        zoom: 0.28;\n      }\n      /* ponytail: scale-up via font-size — GSAP only touches CSS vars, not transform */\n      .hf-catalog-rgb-glitch-text {\n        color: #fafafa;\n        font-family: Inter, system-ui, sans-serif;\n        font-weight: 900;\n        letter-spacing: -0.04em;\n      }\n      .hf-catalog-rgb-glitch-text {\n        position: relative;\n        width: 1120px;\n        height: 200px;\n        font-size: 192px;\n        line-height: 1;\n      }\n      .hf-catalog-rgb-glitch-text span,\n      .hf-catalog-rgb-glitch-text strong {\n        position: absolute;\n        inset: 0;\n      }\n      .hf-catalog-rgb-glitch-text span:first-child {\n        color: #ef4444;\n        mix-blend-mode: screen;\n        transform: translateX(var(--hf-glitch-red, 0px));\n      }\n      .hf-catalog-rgb-glitch-text span:nth-child(2) {\n        color: #22d3ee;\n        mix-blend-mode: screen;\n        transform: translateX(var(--hf-glitch-blue, 0px));\n      }\n      .hf-catalog-rgb-glitch-text strong {\n        color: #fafafa;\n      }\n      .demo-label {\n        font-size: 24px;\n        font-weight: 500;\n        color: #52525b;\n        letter-spacing: 0.12em;\n        text-transform: uppercase;\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"demo\"\n      data-composition-id=\"rgb-glitch-text-demo\"\n      data-start=\"0\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n      data-duration=\"5\"\n    >\n      <div class=\"demo-frame\">\n        <div class=\"hf-catalog-rgb-glitch-text\">\n          <span>GLITCH</span><span>GLITCH</span><strong>GLITCH</strong>\n        </div>\n        <div class=\"demo-label\">RGB Glitch Text</div>\n      </div>\n      <script>\n        const tl = gsap.timeline({ paused: true });\n        const startTime = 0.5;\n        tl.to(\".hf-catalog-rgb-glitch-text\", { opacity: 1, duration: 0.01 }, startTime);\n        tl.to(\n          \".hf-catalog-rgb-glitch-text\",\n          {\n            \"--hf-glitch-red\": \"-20px\",\n            \"--hf-glitch-blue\": \"20px\",\n            duration: 0.06,\n            repeat: 5,\n            yoyo: true,\n            ease: \"steps(1)\",\n          },\n          startTime + 0.1,\n        );\n        tl.set({}, {}, 5);\n        window.__timelines = window.__timelines || {};\n        window.__timelines[\"rgb-glitch-text-demo\"] = tl;\n      </script>\n    </div>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/docs/public/catalog/components/shared-axis-y.json b/docs/public/catalog/components/shared-axis-y.json
index 85d5658cb7..38171e6c69 100644
--- a/docs/public/catalog/components/shared-axis-y.json
+++ b/docs/public/catalog/components/shared-axis-y.json
@@ -1 +1 @@
-{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=1920, height=1080\" />\n    <title>Shared Axis Y - Demo</title>\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      * {\n        box-sizing: border-box;\n      }\n      html,\n      body {\n        margin: 0;\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n      }\n      #demo {\n        width: 1920px;\n        height: 1080px;\n        display: grid;\n        place-items: center;\n        background: #f4f4f5;\n        font-family: Inter, system-ui, sans-serif;\n      }\n      /* ponytail: zoom on .demo-frame (non-GSAP wrapper) keeps GSAP inline transforms on the child untouched */\n      .demo-frame {\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        gap: 0;\n        zoom: 2.2;\n      }\n      .demo-card {\n        background: #fafafa;\n        border: 1px solid #e4e4e7;\n        border-radius: 16px;\n        box-shadow: 0 24px 70px rgba(0, 0, 0, 0.1);\n        padding: 48px 56px 52px;\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        gap: 32px;\n        min-width: 480px;\n      }\n      .demo-label {\n        font-size: 11px;\n        font-weight: 600;\n        letter-spacing: 0.08em;\n        text-transform: uppercase;\n        color: #71717a;\n      }\n      .demo-tabs {\n        display: flex;\n        gap: 4px;\n        background: #f4f4f5;\n        border-radius: 10px;\n        padding: 4px;\n      }\n      .demo-tab {\n        font-size: 13px;\n        font-weight: 500;\n        color: #71717a;\n        padding: 6px 16px;\n        border-radius: 7px;\n        cursor: default;\n      }\n      .demo-tab.active {\n        background: #fff;\n        color: #18181b;\n        font-weight: 600;\n        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);\n      }\n      .demo-divider {\n        width: 100%;\n        height: 1px;\n        background: #e4e4e7;\n      }\n      .hf-remocn-shared-axis-y {\n        color: #18181b;\n        font-family: Inter, system-ui, sans-serif;\n        font-weight: 800;\n        letter-spacing: -0.03em;\n        display: inline-flex;\n        gap: 10px;\n        font-size: 48px;\n        line-height: 1;\n      }\n      .hf-remocn-shared-axis-y span {\n        display: inline-block;\n        transform: translate(var(--hf-word-x, 0px), var(--hf-word-y, 0px))\n          scale(var(--hf-word-scale, 1));\n        filter: blur(var(--hf-word-blur, 0px));\n        will-change: transform, filter, opacity;\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"demo\"\n      data-composition-id=\"shared-axis-y-demo\"\n      data-start=\"0\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n      data-duration=\"5\"\n    >\n      <div class=\"demo-frame\">\n        <div class=\"demo-card\">\n          <span class=\"demo-label\">Mode</span>\n          <div class=\"demo-tabs\">\n            <div class=\"demo-tab active\">Plan</div>\n            <div class=\"demo-tab\">Debug</div>\n            <div class=\"demo-tab\">Ask</div>\n          </div>\n          <div class=\"demo-divider\"></div>\n          <div class=\"hf-remocn-shared-axis-y\">\n            <span>Plan</span><span>Debug</span><span>Ask</span>\n          </div>\n        </div>\n      </div>\n      <script>\n        const tl = gsap.timeline({ paused: true });\n        const startTime = 0.5;\n        tl.fromTo(\n          \".hf-remocn-shared-axis-y span\",\n          { opacity: 0, \"--hf-word-y\": \"32px\" },\n          { opacity: 1, \"--hf-word-y\": \"0px\", duration: 0.22, stagger: 0.075, ease: \"power2.out\" },\n          startTime,\n        );\n        tl.set({}, {}, 5);\n        window.__timelines = window.__timelines || {};\n        window.__timelines[\"shared-axis-y-demo\"] = tl;\n      </script>\n    </div>\n  </body>\n</html>\n"}
\ No newline at end of file
+{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=1920, height=1080\" />\n    <title>Shared Axis Y - Demo</title>\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      * {\n        box-sizing: border-box;\n      }\n      html,\n      body {\n        margin: 0;\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n      }\n      #demo {\n        width: 1920px;\n        height: 1080px;\n        display: grid;\n        place-items: center;\n        background: #f4f4f5;\n        font-family: Inter, system-ui, sans-serif;\n      }\n      /* ponytail: zoom on .demo-frame (non-GSAP wrapper) keeps GSAP inline transforms on the child untouched */\n      .demo-frame {\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        gap: 0;\n        zoom: 2.2;\n      }\n      .demo-card {\n        background: #fafafa;\n        border: 1px solid #e4e4e7;\n        border-radius: 16px;\n        box-shadow: 0 24px 70px rgba(0, 0, 0, 0.1);\n        padding: 48px 56px 52px;\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        gap: 32px;\n        min-width: 480px;\n      }\n      .demo-label {\n        font-size: 11px;\n        font-weight: 600;\n        letter-spacing: 0.08em;\n        text-transform: uppercase;\n        color: #71717a;\n      }\n      .demo-tabs {\n        display: flex;\n        gap: 4px;\n        background: #f4f4f5;\n        border-radius: 10px;\n        padding: 4px;\n      }\n      .demo-tab {\n        font-size: 13px;\n        font-weight: 500;\n        color: #71717a;\n        padding: 6px 16px;\n        border-radius: 7px;\n        cursor: default;\n      }\n      .demo-tab.active {\n        background: #fff;\n        color: #18181b;\n        font-weight: 600;\n        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);\n      }\n      .demo-divider {\n        width: 100%;\n        height: 1px;\n        background: #e4e4e7;\n      }\n      .hf-catalog-shared-axis-y {\n        color: #18181b;\n        font-family: Inter, system-ui, sans-serif;\n        font-weight: 800;\n        letter-spacing: -0.03em;\n        display: inline-flex;\n        gap: 10px;\n        font-size: 48px;\n        line-height: 1;\n      }\n      .hf-catalog-shared-axis-y span {\n        display: inline-block;\n        transform: translate(var(--hf-word-x, 0px), var(--hf-word-y, 0px))\n          scale(var(--hf-word-scale, 1));\n        filter: blur(var(--hf-word-blur, 0px));\n        will-change: transform, filter, opacity;\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"demo\"\n      data-composition-id=\"shared-axis-y-demo\"\n      data-start=\"0\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n      data-duration=\"5\"\n    >\n      <div class=\"demo-frame\">\n        <div class=\"demo-card\">\n          <span class=\"demo-label\">Mode</span>\n          <div class=\"demo-tabs\">\n            <div class=\"demo-tab active\">Plan</div>\n            <div class=\"demo-tab\">Debug</div>\n            <div class=\"demo-tab\">Ask</div>\n          </div>\n          <div class=\"demo-divider\"></div>\n          <div class=\"hf-catalog-shared-axis-y\">\n            <span>Plan</span><span>Debug</span><span>Ask</span>\n          </div>\n        </div>\n      </div>\n      <script>\n        const tl = gsap.timeline({ paused: true });\n        const startTime = 0.5;\n        tl.fromTo(\n          \".hf-catalog-shared-axis-y span\",\n          { opacity: 0, \"--hf-word-y\": \"32px\" },\n          { opacity: 1, \"--hf-word-y\": \"0px\", duration: 0.22, stagger: 0.075, ease: \"power2.out\" },\n          startTime,\n        );\n        tl.set({}, {}, 5);\n        window.__timelines = window.__timelines || {};\n        window.__timelines[\"shared-axis-y-demo\"] = tl;\n      </script>\n    </div>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/docs/public/catalog/components/shared-axis-z.json b/docs/public/catalog/components/shared-axis-z.json
index c23c4b7a69..951c82dd63 100644
--- a/docs/public/catalog/components/shared-axis-z.json
+++ b/docs/public/catalog/components/shared-axis-z.json
@@ -1 +1 @@
-{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=1920, height=1080\" />\n    <title>Shared Axis Z - Demo</title>\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      * {\n        box-sizing: border-box;\n      }\n      html,\n      body {\n        margin: 0;\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n      }\n      #demo {\n        width: 1920px;\n        height: 1080px;\n        display: grid;\n        place-items: center;\n        background: #f4f4f5;\n        font-family: Inter, system-ui, sans-serif;\n      }\n      /* ponytail: demo-frame is not a GSAP target — CSS transform is safe */\n      .demo-frame {\n        position: relative;\n        width: 720px;\n        height: 480px;\n        transform: scale(1.6);\n      }\n      /* Shared container that clips both panels */\n      .axis-z-stage {\n        position: relative;\n        width: 720px;\n        height: 480px;\n        border-radius: 16px;\n        overflow: hidden;\n        box-shadow:\n          0 32px 80px rgba(0, 0, 0, 0.12),\n          0 2px 8px rgba(0, 0, 0, 0.06);\n        border: 1px solid #e4e4e7;\n        background: #ffffff;\n      }\n      /* Outgoing panel (zooms out + fades) */\n      .axis-z-outgoing {\n        position: absolute;\n        inset: 0;\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        justify-content: center;\n        gap: 14px;\n        background: #ffffff;\n        will-change: transform, opacity;\n      }\n      .axis-z-outgoing-icon {\n        width: 52px;\n        height: 52px;\n        border-radius: 12px;\n        background: #18181b;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n      }\n      .axis-z-outgoing-icon svg {\n        width: 26px;\n        height: 26px;\n        fill: none;\n        stroke: #ffffff;\n        stroke-width: 2;\n        stroke-linecap: round;\n        stroke-linejoin: round;\n      }\n      .axis-z-outgoing-title {\n        font-size: 18px;\n        font-weight: 600;\n        color: #18181b;\n        letter-spacing: -0.02em;\n      }\n      .axis-z-outgoing-subtitle {\n        font-size: 13px;\n        font-weight: 400;\n        color: #71717a;\n      }\n      .axis-z-outgoing-row {\n        display: flex;\n        gap: 8px;\n        margin-top: 4px;\n      }\n      .axis-z-chip {\n        padding: 5px 12px;\n        border-radius: 999px;\n        background: #f4f4f5;\n        border: 1px solid #e4e4e7;\n        font-size: 12px;\n        font-weight: 500;\n        color: #52525b;\n      }\n      /* Incoming panel (the component output — zooms in from small) */\n      .axis-z-incoming {\n        position: absolute;\n        inset: 0;\n        display: flex;\n        flex-direction: column;\n        padding: 40px;\n        gap: 24px;\n        background: #ffffff;\n        will-change: transform, opacity;\n      }\n      .axis-z-incoming-header {\n        display: flex;\n        flex-direction: column;\n        gap: 6px;\n      }\n      .axis-z-incoming-eyebrow {\n        font-size: 11px;\n        font-weight: 600;\n        letter-spacing: 0.08em;\n        text-transform: uppercase;\n        color: #71717a;\n      }\n      /* GSAP animates .hf-remocn-shared-axis-z span — must keep class + span structure */\n      .hf-remocn-shared-axis-z {\n        display: inline-flex;\n        gap: 10px;\n        font-size: 36px;\n        font-weight: 800;\n        letter-spacing: -0.04em;\n        line-height: 1;\n        color: #18181b;\n      }\n      .hf-remocn-shared-axis-z span {\n        display: inline-block;\n        transform: translate(var(--hf-word-x, 0px), var(--hf-word-y, 0px))\n          scale(var(--hf-word-scale, 1));\n        filter: blur(var(--hf-word-blur, 0px));\n        will-change: transform, filter, opacity;\n      }\n      .axis-z-incoming-meta {\n        font-size: 13px;\n        color: #71717a;\n        font-weight: 400;\n        line-height: 1.5;\n        max-width: 400px;\n      }\n      .axis-z-incoming-stats {\n        display: flex;\n        gap: 16px;\n        margin-top: auto;\n      }\n      .axis-z-stat {\n        display: flex;\n        flex-direction: column;\n        gap: 3px;\n        padding: 16px 20px;\n        background: #fafafa;\n        border: 1px solid #e4e4e7;\n        border-radius: 10px;\n        flex: 1;\n      }\n      .axis-z-stat-value {\n        font-size: 22px;\n        font-weight: 700;\n        color: #18181b;\n        letter-spacing: -0.03em;\n      }\n      .axis-z-stat-label {\n        font-size: 11px;\n        font-weight: 500;\n        color: #71717a;\n        text-transform: uppercase;\n        letter-spacing: 0.06em;\n      }\n      .axis-z-divider {\n        width: 100%;\n        height: 1px;\n        background: #e4e4e7;\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"demo\"\n      data-composition-id=\"shared-axis-z-demo\"\n      data-start=\"0\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n      data-duration=\"5\"\n    >\n      <div class=\"demo-frame\">\n        <div class=\"axis-z-stage\">\n          <!-- Outgoing view: zooms out + fades as incoming arrives -->\n          <div class=\"axis-z-outgoing\">\n            <div class=\"axis-z-outgoing-icon\">\n              <svg viewBox=\"0 0 24 24\">\n                <rect x=\"3\" y=\"3\" width=\"7\" height=\"7\" rx=\"1\" />\n                <rect x=\"14\" y=\"3\" width=\"7\" height=\"7\" rx=\"1\" />\n                <rect x=\"3\" y=\"14\" width=\"7\" height=\"7\" rx=\"1\" />\n                <rect x=\"14\" y=\"14\" width=\"7\" height=\"7\" rx=\"1\" />\n              </svg>\n            </div>\n            <div class=\"axis-z-outgoing-title\">Overview</div>\n            <div class=\"axis-z-outgoing-subtitle\">Select a context to zoom in</div>\n            <div class=\"axis-z-outgoing-row\">\n              <div class=\"axis-z-chip\">Analytics</div>\n              <div class=\"axis-z-chip\">Reports</div>\n              <div class=\"axis-z-chip\">Settings</div>\n            </div>\n          </div>\n\n          <!-- Incoming view: zooms in from center (shared-axis-Z) -->\n          <div class=\"axis-z-incoming\">\n            <div class=\"axis-z-incoming-header\">\n              <div class=\"axis-z-incoming-eyebrow\">Analytics</div>\n              <div class=\"hf-remocn-shared-axis-z\"><span>Zoom</span><span>context</span></div>\n              <div class=\"axis-z-incoming-meta\">\n                Drill into any metric with a shared-axis Z transition — the new view scales in from\n                the tap point.\n              </div>\n            </div>\n            <div class=\"axis-z-divider\"></div>\n            <div class=\"axis-z-incoming-stats\">\n              <div class=\"axis-z-stat\">\n                <div class=\"axis-z-stat-value\">24.8k</div>\n                <div class=\"axis-z-stat-label\">Sessions</div>\n              </div>\n              <div class=\"axis-z-stat\">\n                <div class=\"axis-z-stat-value\">3.4s</div>\n                <div class=\"axis-z-stat-label\">Avg. time</div>\n              </div>\n              <div class=\"axis-z-stat\">\n                <div class=\"axis-z-stat-value\">91%</div>\n                <div class=\"axis-z-stat-label\">Retention</div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n      <script>\n        const tl = gsap.timeline({ paused: true });\n        const startTime = 0.5;\n\n        // Outgoing panel: zoom out + fade (shared-axis Z departure)\n        tl.fromTo(\n          \".axis-z-outgoing\",\n          { opacity: 1, scale: 1 },\n          { opacity: 0, scale: 1.18, duration: 0.4, ease: \"power2.in\" },\n          startTime,\n        );\n\n        // Incoming panel: zoom in from small + fade (shared-axis Z arrival)\n        tl.fromTo(\n          \".axis-z-incoming\",\n          { opacity: 0, scale: 0.82 },\n          { opacity: 1, scale: 1, duration: 0.45, ease: \"expo.out\" },\n          startTime + 0.05,\n        );\n\n        // Word-by-word reveal on the title\n        tl.fromTo(\n          \".hf-remocn-shared-axis-z span\",\n          { opacity: 0, \"--hf-word-scale\": 0.72 },\n          {\n            opacity: 1,\n            \"--hf-word-scale\": 1,\n            duration: 0.34,\n            stagger: 0.06,\n            ease: \"back.out(1.8)\",\n          },\n          startTime + 0.28,\n        );\n\n        tl.set({}, {}, 5);\n        window.__timelines = window.__timelines || {};\n        window.__timelines[\"shared-axis-z-demo\"] = tl;\n      </script>\n    </div>\n  </body>\n</html>\n"}
\ No newline at end of file
+{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=1920, height=1080\" />\n    <title>Shared Axis Z - Demo</title>\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      * {\n        box-sizing: border-box;\n      }\n      html,\n      body {\n        margin: 0;\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n      }\n      #demo {\n        width: 1920px;\n        height: 1080px;\n        display: grid;\n        place-items: center;\n        background: #f4f4f5;\n        font-family: Inter, system-ui, sans-serif;\n      }\n      /* ponytail: demo-frame is not a GSAP target — CSS transform is safe */\n      .demo-frame {\n        position: relative;\n        width: 720px;\n        height: 480px;\n        transform: scale(1.6);\n      }\n      /* Shared container that clips both panels */\n      .axis-z-stage {\n        position: relative;\n        width: 720px;\n        height: 480px;\n        border-radius: 16px;\n        overflow: hidden;\n        box-shadow:\n          0 32px 80px rgba(0, 0, 0, 0.12),\n          0 2px 8px rgba(0, 0, 0, 0.06);\n        border: 1px solid #e4e4e7;\n        background: #ffffff;\n      }\n      /* Outgoing panel (zooms out + fades) */\n      .axis-z-outgoing {\n        position: absolute;\n        inset: 0;\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        justify-content: center;\n        gap: 14px;\n        background: #ffffff;\n        will-change: transform, opacity;\n      }\n      .axis-z-outgoing-icon {\n        width: 52px;\n        height: 52px;\n        border-radius: 12px;\n        background: #18181b;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n      }\n      .axis-z-outgoing-icon svg {\n        width: 26px;\n        height: 26px;\n        fill: none;\n        stroke: #ffffff;\n        stroke-width: 2;\n        stroke-linecap: round;\n        stroke-linejoin: round;\n      }\n      .axis-z-outgoing-title {\n        font-size: 18px;\n        font-weight: 600;\n        color: #18181b;\n        letter-spacing: -0.02em;\n      }\n      .axis-z-outgoing-subtitle {\n        font-size: 13px;\n        font-weight: 400;\n        color: #71717a;\n      }\n      .axis-z-outgoing-row {\n        display: flex;\n        gap: 8px;\n        margin-top: 4px;\n      }\n      .axis-z-chip {\n        padding: 5px 12px;\n        border-radius: 999px;\n        background: #f4f4f5;\n        border: 1px solid #e4e4e7;\n        font-size: 12px;\n        font-weight: 500;\n        color: #52525b;\n      }\n      /* Incoming panel (the component output — zooms in from small) */\n      .axis-z-incoming {\n        position: absolute;\n        inset: 0;\n        display: flex;\n        flex-direction: column;\n        padding: 40px;\n        gap: 24px;\n        background: #ffffff;\n        will-change: transform, opacity;\n      }\n      .axis-z-incoming-header {\n        display: flex;\n        flex-direction: column;\n        gap: 6px;\n      }\n      .axis-z-incoming-eyebrow {\n        font-size: 11px;\n        font-weight: 600;\n        letter-spacing: 0.08em;\n        text-transform: uppercase;\n        color: #71717a;\n      }\n      /* GSAP animates .hf-catalog-shared-axis-z span — must keep class + span structure */\n      .hf-catalog-shared-axis-z {\n        display: inline-flex;\n        gap: 10px;\n        font-size: 36px;\n        font-weight: 800;\n        letter-spacing: -0.04em;\n        line-height: 1;\n        color: #18181b;\n      }\n      .hf-catalog-shared-axis-z span {\n        display: inline-block;\n        transform: translate(var(--hf-word-x, 0px), var(--hf-word-y, 0px))\n          scale(var(--hf-word-scale, 1));\n        filter: blur(var(--hf-word-blur, 0px));\n        will-change: transform, filter, opacity;\n      }\n      .axis-z-incoming-meta {\n        font-size: 13px;\n        color: #71717a;\n        font-weight: 400;\n        line-height: 1.5;\n        max-width: 400px;\n      }\n      .axis-z-incoming-stats {\n        display: flex;\n        gap: 16px;\n        margin-top: auto;\n      }\n      .axis-z-stat {\n        display: flex;\n        flex-direction: column;\n        gap: 3px;\n        padding: 16px 20px;\n        background: #fafafa;\n        border: 1px solid #e4e4e7;\n        border-radius: 10px;\n        flex: 1;\n      }\n      .axis-z-stat-value {\n        font-size: 22px;\n        font-weight: 700;\n        color: #18181b;\n        letter-spacing: -0.03em;\n      }\n      .axis-z-stat-label {\n        font-size: 11px;\n        font-weight: 500;\n        color: #71717a;\n        text-transform: uppercase;\n        letter-spacing: 0.06em;\n      }\n      .axis-z-divider {\n        width: 100%;\n        height: 1px;\n        background: #e4e4e7;\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"demo\"\n      data-composition-id=\"shared-axis-z-demo\"\n      data-start=\"0\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n      data-duration=\"5\"\n    >\n      <div class=\"demo-frame\">\n        <div class=\"axis-z-stage\">\n          <!-- Outgoing view: zooms out + fades as incoming arrives -->\n          <div class=\"axis-z-outgoing\">\n            <div class=\"axis-z-outgoing-icon\">\n              <svg viewBox=\"0 0 24 24\">\n                <rect x=\"3\" y=\"3\" width=\"7\" height=\"7\" rx=\"1\" />\n                <rect x=\"14\" y=\"3\" width=\"7\" height=\"7\" rx=\"1\" />\n                <rect x=\"3\" y=\"14\" width=\"7\" height=\"7\" rx=\"1\" />\n                <rect x=\"14\" y=\"14\" width=\"7\" height=\"7\" rx=\"1\" />\n              </svg>\n            </div>\n            <div class=\"axis-z-outgoing-title\">Overview</div>\n            <div class=\"axis-z-outgoing-subtitle\">Select a context to zoom in</div>\n            <div class=\"axis-z-outgoing-row\">\n              <div class=\"axis-z-chip\">Analytics</div>\n              <div class=\"axis-z-chip\">Reports</div>\n              <div class=\"axis-z-chip\">Settings</div>\n            </div>\n          </div>\n\n          <!-- Incoming view: zooms in from center (shared-axis-Z) -->\n          <div class=\"axis-z-incoming\">\n            <div class=\"axis-z-incoming-header\">\n              <div class=\"axis-z-incoming-eyebrow\">Analytics</div>\n              <div class=\"hf-catalog-shared-axis-z\"><span>Zoom</span><span>context</span></div>\n              <div class=\"axis-z-incoming-meta\">\n                Drill into any metric with a shared-axis Z transition — the new view scales in from\n                the tap point.\n              </div>\n            </div>\n            <div class=\"axis-z-divider\"></div>\n            <div class=\"axis-z-incoming-stats\">\n              <div class=\"axis-z-stat\">\n                <div class=\"axis-z-stat-value\">24.8k</div>\n                <div class=\"axis-z-stat-label\">Sessions</div>\n              </div>\n              <div class=\"axis-z-stat\">\n                <div class=\"axis-z-stat-value\">3.4s</div>\n                <div class=\"axis-z-stat-label\">Avg. time</div>\n              </div>\n              <div class=\"axis-z-stat\">\n                <div class=\"axis-z-stat-value\">91%</div>\n                <div class=\"axis-z-stat-label\">Retention</div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n      <script>\n        const tl = gsap.timeline({ paused: true });\n        const startTime = 0.5;\n\n        // Outgoing panel: zoom out + fade (shared-axis Z departure)\n        tl.fromTo(\n          \".axis-z-outgoing\",\n          { opacity: 1, scale: 1 },\n          { opacity: 0, scale: 1.18, duration: 0.4, ease: \"power2.in\" },\n          startTime,\n        );\n\n        // Incoming panel: zoom in from small + fade (shared-axis Z arrival)\n        tl.fromTo(\n          \".axis-z-incoming\",\n          { opacity: 0, scale: 0.82 },\n          { opacity: 1, scale: 1, duration: 0.45, ease: \"expo.out\" },\n          startTime + 0.05,\n        );\n\n        // Word-by-word reveal on the title\n        tl.fromTo(\n          \".hf-catalog-shared-axis-z span\",\n          { opacity: 0, \"--hf-word-scale\": 0.72 },\n          {\n            opacity: 1,\n            \"--hf-word-scale\": 1,\n            duration: 0.34,\n            stagger: 0.06,\n            ease: \"back.out(1.8)\",\n          },\n          startTime + 0.28,\n        );\n\n        tl.set({}, {}, 5);\n        window.__timelines = window.__timelines || {};\n        window.__timelines[\"shared-axis-z-demo\"] = tl;\n      </script>\n    </div>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/docs/public/catalog/components/slot-machine-roll.json b/docs/public/catalog/components/slot-machine-roll.json
index 5be56ca066..a94c7bb212 100644
--- a/docs/public/catalog/components/slot-machine-roll.json
+++ b/docs/public/catalog/components/slot-machine-roll.json
@@ -1 +1 @@
-{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=1920, height=1080\" />\n    <title>Slot Machine Roll - Demo</title>\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      * {\n        box-sizing: border-box;\n      }\n      html,\n      body {\n        margin: 0;\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n      }\n      #demo {\n        width: 1920px;\n        height: 1080px;\n        display: grid;\n        place-items: center;\n        background: #f7f7f8;\n        font-family: Inter, system-ui, sans-serif;\n      }\n      .demo-frame {\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        gap: 32px;\n        /* ponytail: scale on non-GSAP wrapper — safe, GSAP only animates --hf-slot-y on inner <i> */\n        transform: scale(1.85);\n        transform-origin: center center;\n      }\n      .slot-card {\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        gap: 24px;\n        background: #ffffff;\n        border: 1px solid #e4e4e7;\n        border-radius: 14px;\n        padding: 40px 56px;\n        box-shadow: 0 24px 70px rgba(0, 0, 0, 0.1);\n      }\n      .slot-label {\n        font-family: Inter, system-ui, sans-serif;\n        font-size: 11px;\n        font-weight: 500;\n        letter-spacing: 0.08em;\n        text-transform: uppercase;\n        color: #71717a;\n      }\n      .hf-remocn-slot-machine-roll {\n        color: #18181b;\n        font-family: Inter, system-ui, sans-serif;\n        font-weight: 900;\n        letter-spacing: -0.04em;\n      }\n      .hf-remocn-slot-machine-roll {\n        display: inline-flex;\n        gap: 6px;\n        height: 74px;\n        overflow: hidden;\n        font:\n          900 74px/1 ui-monospace,\n          SFMono-Regular,\n          Menlo,\n          monospace;\n      }\n      .hf-remocn-slot-machine-roll span {\n        display: block;\n        height: 74px;\n        overflow: hidden;\n      }\n      .hf-remocn-slot-machine-roll i {\n        display: block;\n        font-style: normal;\n        transform: translateY(var(--hf-slot-y, 0px));\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"demo\"\n      data-composition-id=\"slot-machine-roll-demo\"\n      data-start=\"0\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n      data-duration=\"5\"\n    >\n      <div class=\"demo-frame\">\n        <div class=\"slot-card\">\n          <div class=\"slot-label\">Slot Machine Roll</div>\n          <div class=\"hf-remocn-slot-machine-roll\">\n            <span\n              ><i>0<br />A</i></span\n            ><span\n              ><i>0<br />7</i></span\n            ><span\n              ><i>0<br />K</i></span\n            >\n          </div>\n        </div>\n      </div>\n      <script>\n        const tl = gsap.timeline({ paused: true });\n        const startTime = 0.5;\n        tl.fromTo(\n          \".hf-remocn-slot-machine-roll i\",\n          { \"--hf-slot-y\": \"0px\" },\n          { \"--hf-slot-y\": \"-74px\", duration: 0.52, stagger: 0.06, ease: \"power3.inOut\" },\n          startTime,\n        );\n        tl.set({}, {}, 5);\n        window.__timelines = window.__timelines || {};\n        window.__timelines[\"slot-machine-roll-demo\"] = tl;\n      </script>\n    </div>\n  </body>\n</html>\n"}
\ No newline at end of file
+{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=1920, height=1080\" />\n    <title>Slot Machine Roll - Demo</title>\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      * {\n        box-sizing: border-box;\n      }\n      html,\n      body {\n        margin: 0;\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n      }\n      #demo {\n        width: 1920px;\n        height: 1080px;\n        display: grid;\n        place-items: center;\n        background: #f7f7f8;\n        font-family: Inter, system-ui, sans-serif;\n      }\n      .demo-frame {\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        gap: 32px;\n        /* ponytail: scale on non-GSAP wrapper — safe, GSAP only animates --hf-slot-y on inner <i> */\n        transform: scale(1.85);\n        transform-origin: center center;\n      }\n      .slot-card {\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        gap: 24px;\n        background: #ffffff;\n        border: 1px solid #e4e4e7;\n        border-radius: 14px;\n        padding: 40px 56px;\n        box-shadow: 0 24px 70px rgba(0, 0, 0, 0.1);\n      }\n      .slot-label {\n        font-family: Inter, system-ui, sans-serif;\n        font-size: 11px;\n        font-weight: 500;\n        letter-spacing: 0.08em;\n        text-transform: uppercase;\n        color: #71717a;\n      }\n      .hf-catalog-slot-machine-roll {\n        color: #18181b;\n        font-family: Inter, system-ui, sans-serif;\n        font-weight: 900;\n        letter-spacing: -0.04em;\n      }\n      .hf-catalog-slot-machine-roll {\n        display: inline-flex;\n        gap: 6px;\n        height: 74px;\n        overflow: hidden;\n        font:\n          900 74px/1 ui-monospace,\n          SFMono-Regular,\n          Menlo,\n          monospace;\n      }\n      .hf-catalog-slot-machine-roll span {\n        display: block;\n        height: 74px;\n        overflow: hidden;\n      }\n      .hf-catalog-slot-machine-roll i {\n        display: block;\n        font-style: normal;\n        transform: translateY(var(--hf-slot-y, 0px));\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"demo\"\n      data-composition-id=\"slot-machine-roll-demo\"\n      data-start=\"0\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n      data-duration=\"5\"\n    >\n      <div class=\"demo-frame\">\n        <div class=\"slot-card\">\n          <div class=\"slot-label\">Slot Machine Roll</div>\n          <div class=\"hf-catalog-slot-machine-roll\">\n            <span\n              ><i>0<br />A</i></span\n            ><span\n              ><i>0<br />7</i></span\n            ><span\n              ><i>0<br />K</i></span\n            >\n          </div>\n        </div>\n      </div>\n      <script>\n        const tl = gsap.timeline({ paused: true });\n        const startTime = 0.5;\n        tl.fromTo(\n          \".hf-catalog-slot-machine-roll i\",\n          { \"--hf-slot-y\": \"0px\" },\n          { \"--hf-slot-y\": \"-74px\", duration: 0.52, stagger: 0.06, ease: \"power3.inOut\" },\n          startTime,\n        );\n        tl.set({}, {}, 5);\n        window.__timelines = window.__timelines || {};\n        window.__timelines[\"slot-machine-roll-demo\"] = tl;\n      </script>\n    </div>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/docs/public/catalog/components/spotlight-card.json b/docs/public/catalog/components/spotlight-card.json
index 22e4d54dd7..df458583e3 100644
--- a/docs/public/catalog/components/spotlight-card.json
+++ b/docs/public/catalog/components/spotlight-card.json
@@ -1 +1 @@
-{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=1920, height=1080\" />\n    <title>Spotlight Card - Demo</title>\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      * {\n        box-sizing: border-box;\n      }\n      html,\n      body {\n        margin: 0;\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n      }\n      #demo {\n        width: 1920px;\n        height: 1080px;\n        display: grid;\n        place-items: center;\n        background: #f7f7f8;\n        font-family: Inter, system-ui, sans-serif;\n      }\n      .demo-frame {\n        display: grid;\n        place-items: center;\n        padding: 52px;\n        transform: scale(1.65);\n        transform-origin: center center;\n      }\n      .hf-remocn-spotlight-card {\n        --hf-accent: var(--accent, #18181b);\n        --hf-ink: #111827;\n        --hf-muted: #6b7280;\n        --hf-surface: #ffffff;\n        color: var(--hf-ink);\n        font-family: Inter, system-ui, sans-serif;\n      }\n      .hf-remocn-spotlight-card {\n        position: relative;\n        width: 760px;\n        height: 428px;\n        overflow: hidden;\n        border-radius: 30px;\n        background: #080b12;\n        box-shadow: 0 28px 80px rgba(15, 23, 42, 0.2);\n      }\n      .hf-remocn-spotlight-card .mesh {\n        position: absolute;\n        inset: -22%;\n        filter: blur(44px);\n        opacity: 0.88;\n        background:\n          radial-gradient(\n            circle at var(--hf-x1, 20%) var(--hf-y1, 30%),\n            rgba(255, 255, 255, 0.45) 0 18%,\n            transparent 32%\n          ),\n          radial-gradient(\n            circle at var(--hf-x2, 76%) var(--hf-y2, 52%),\n            rgba(255, 255, 255, 0.18) 0 16%,\n            transparent 34%\n          ),\n          radial-gradient(\n            circle at var(--hf-x3, 46%) var(--hf-y3, 78%),\n            rgba(255, 255, 255, 0.08) 0 18%,\n            transparent 34%\n          );\n      }\n      .hf-remocn-spotlight-card .card {\n        position: absolute;\n        inset: 74px 92px;\n        border: 1px solid rgba(255, 255, 255, 0.16);\n        border-radius: 26px;\n        background: rgba(255, 255, 255, 0.08);\n        color: #fff;\n        display: grid;\n        place-items: center;\n        text-align: center;\n        overflow: hidden;\n      }\n      .hf-remocn-spotlight-card .spot {\n        position: absolute;\n        width: 260px;\n        height: 260px;\n        border-radius: 50%;\n        background: radial-gradient(circle, rgba(255, 255, 255, 0.5), transparent 65%);\n        transform: translate(var(--hf-spot-x, 0px), var(--hf-spot-y, 0px));\n        mix-blend-mode: screen;\n      }\n      .hf-remocn-spotlight-card .particle {\n        position: absolute;\n        left: 50%;\n        top: 54%;\n        width: 12px;\n        height: 20px;\n        border-radius: 3px;\n        background: var(--c);\n        transform: translate(var(--hf-px, 0px), var(--hf-py, 0px)) rotate(var(--hf-pr, 0deg));\n        opacity: var(--hf-po, 0);\n      }\n      .hf-remocn-spotlight-card h3 {\n        margin: 0;\n        font-size: 44px;\n        letter-spacing: -0.04em;\n      }\n      .hf-remocn-spotlight-card p {\n        margin: 8px 0 0;\n        font-size: 18px;\n        color: rgba(255, 255, 255, 0.7);\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"demo\"\n      data-composition-id=\"spotlight-card-demo\"\n      data-start=\"0\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n      data-duration=\"5\"\n    >\n      <div class=\"demo-frame\">\n        <div class=\"hf-remocn-spotlight-card\">\n          <div class=\"mesh\"></div>\n          <div class=\"card\">\n            <div class=\"spot\"></div>\n            <div>\n              <h3>Spotlight Card</h3>\n              <p>A card with a scripted cursor spotlight and lit border.</p>\n            </div>\n          </div>\n        </div>\n      </div>\n      <script>\n        const tl = gsap.timeline({ paused: true });\n        const startTime = 0.5;\n        tl.fromTo(\n          \".hf-remocn-spotlight-card .mesh\",\n          {\n            \"--hf-x1\": \"18%\",\n            \"--hf-y1\": \"28%\",\n            \"--hf-x2\": \"78%\",\n            \"--hf-y2\": \"46%\",\n            \"--hf-x3\": \"44%\",\n            \"--hf-y3\": \"80%\",\n          },\n          {\n            \"--hf-x1\": \"34%\",\n            \"--hf-y1\": \"42%\",\n            \"--hf-x2\": \"62%\",\n            \"--hf-y2\": \"60%\",\n            \"--hf-x3\": \"58%\",\n            \"--hf-y3\": \"64%\",\n            duration: 4,\n            ease: \"sine.inOut\",\n          },\n          startTime,\n        );\n        tl.fromTo(\n          \".hf-remocn-spotlight-card .spot\",\n          { \"--hf-spot-x\": \"-120px\", \"--hf-spot-y\": \"-70px\" },\n          { \"--hf-spot-x\": \"190px\", \"--hf-spot-y\": \"90px\", duration: 3, ease: \"sine.inOut\" },\n          startTime,\n        );\n        const particles_spotlight_card = gsap.utils.toArray(\".hf-remocn-spotlight-card .particle\");\n        if (particles_spotlight_card.length) {\n          tl.fromTo(\n            particles_spotlight_card,\n            { \"--hf-po\": 0, \"--hf-px\": \"0px\", \"--hf-py\": \"0px\", \"--hf-pr\": \"0deg\" },\n            {\n              \"--hf-po\": 1,\n              \"--hf-px\": (i) => Math.cos(i * 0.83) * 250 + \"px\",\n              \"--hf-py\": (i) => -120 - Math.sin(i * 0.61) * 120 + \"px\",\n              \"--hf-pr\": (i) => 180 + i * 37 + \"deg\",\n              duration: 0.8,\n              stagger: 0.015,\n              ease: \"power2.out\",\n            },\n            startTime + 0.2,\n          );\n        }\n        tl.set({}, {}, 5);\n        window.__timelines = window.__timelines || {};\n        window.__timelines[\"spotlight-card-demo\"] = tl;\n      </script>\n    </div>\n  </body>\n</html>\n"}
\ No newline at end of file
+{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=1920, height=1080\" />\n    <title>Spotlight Card - Demo</title>\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      * {\n        box-sizing: border-box;\n      }\n      html,\n      body {\n        margin: 0;\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n      }\n      #demo {\n        width: 1920px;\n        height: 1080px;\n        display: grid;\n        place-items: center;\n        background: #f7f7f8;\n        font-family: Inter, system-ui, sans-serif;\n      }\n      .demo-frame {\n        display: grid;\n        place-items: center;\n        padding: 52px;\n        transform: scale(1.65);\n        transform-origin: center center;\n      }\n      .hf-catalog-spotlight-card {\n        --hf-accent: var(--accent, #18181b);\n        --hf-ink: #111827;\n        --hf-muted: #6b7280;\n        --hf-surface: #ffffff;\n        color: var(--hf-ink);\n        font-family: Inter, system-ui, sans-serif;\n      }\n      .hf-catalog-spotlight-card {\n        position: relative;\n        width: 760px;\n        height: 428px;\n        overflow: hidden;\n        border-radius: 30px;\n        background: #080b12;\n        box-shadow: 0 28px 80px rgba(15, 23, 42, 0.2);\n      }\n      .hf-catalog-spotlight-card .mesh {\n        position: absolute;\n        inset: -22%;\n        filter: blur(44px);\n        opacity: 0.88;\n        background:\n          radial-gradient(\n            circle at var(--hf-x1, 20%) var(--hf-y1, 30%),\n            rgba(255, 255, 255, 0.45) 0 18%,\n            transparent 32%\n          ),\n          radial-gradient(\n            circle at var(--hf-x2, 76%) var(--hf-y2, 52%),\n            rgba(255, 255, 255, 0.18) 0 16%,\n            transparent 34%\n          ),\n          radial-gradient(\n            circle at var(--hf-x3, 46%) var(--hf-y3, 78%),\n            rgba(255, 255, 255, 0.08) 0 18%,\n            transparent 34%\n          );\n      }\n      .hf-catalog-spotlight-card .card {\n        position: absolute;\n        inset: 74px 92px;\n        border: 1px solid rgba(255, 255, 255, 0.16);\n        border-radius: 26px;\n        background: rgba(255, 255, 255, 0.08);\n        color: #fff;\n        display: grid;\n        place-items: center;\n        text-align: center;\n        overflow: hidden;\n      }\n      .hf-catalog-spotlight-card .spot {\n        position: absolute;\n        width: 260px;\n        height: 260px;\n        border-radius: 50%;\n        background: radial-gradient(circle, rgba(255, 255, 255, 0.5), transparent 65%);\n        transform: translate(var(--hf-spot-x, 0px), var(--hf-spot-y, 0px));\n        mix-blend-mode: screen;\n      }\n      .hf-catalog-spotlight-card .particle {\n        position: absolute;\n        left: 50%;\n        top: 54%;\n        width: 12px;\n        height: 20px;\n        border-radius: 3px;\n        background: var(--c);\n        transform: translate(var(--hf-px, 0px), var(--hf-py, 0px)) rotate(var(--hf-pr, 0deg));\n        opacity: var(--hf-po, 0);\n      }\n      .hf-catalog-spotlight-card h3 {\n        margin: 0;\n        font-size: 44px;\n        letter-spacing: -0.04em;\n      }\n      .hf-catalog-spotlight-card p {\n        margin: 8px 0 0;\n        font-size: 18px;\n        color: rgba(255, 255, 255, 0.7);\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"demo\"\n      data-composition-id=\"spotlight-card-demo\"\n      data-start=\"0\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n      data-duration=\"5\"\n    >\n      <div class=\"demo-frame\">\n        <div class=\"hf-catalog-spotlight-card\">\n          <div class=\"mesh\"></div>\n          <div class=\"card\">\n            <div class=\"spot\"></div>\n            <div>\n              <h3>Spotlight Card</h3>\n              <p>A card with a scripted cursor spotlight and lit border.</p>\n            </div>\n          </div>\n        </div>\n      </div>\n      <script>\n        const tl = gsap.timeline({ paused: true });\n        const startTime = 0.5;\n        tl.fromTo(\n          \".hf-catalog-spotlight-card .mesh\",\n          {\n            \"--hf-x1\": \"18%\",\n            \"--hf-y1\": \"28%\",\n            \"--hf-x2\": \"78%\",\n            \"--hf-y2\": \"46%\",\n            \"--hf-x3\": \"44%\",\n            \"--hf-y3\": \"80%\",\n          },\n          {\n            \"--hf-x1\": \"34%\",\n            \"--hf-y1\": \"42%\",\n            \"--hf-x2\": \"62%\",\n            \"--hf-y2\": \"60%\",\n            \"--hf-x3\": \"58%\",\n            \"--hf-y3\": \"64%\",\n            duration: 4,\n            ease: \"sine.inOut\",\n          },\n          startTime,\n        );\n        tl.fromTo(\n          \".hf-catalog-spotlight-card .spot\",\n          { \"--hf-spot-x\": \"-120px\", \"--hf-spot-y\": \"-70px\" },\n          { \"--hf-spot-x\": \"190px\", \"--hf-spot-y\": \"90px\", duration: 3, ease: \"sine.inOut\" },\n          startTime,\n        );\n        const particles_spotlight_card = gsap.utils.toArray(\".hf-catalog-spotlight-card .particle\");\n        if (particles_spotlight_card.length) {\n          tl.fromTo(\n            particles_spotlight_card,\n            { \"--hf-po\": 0, \"--hf-px\": \"0px\", \"--hf-py\": \"0px\", \"--hf-pr\": \"0deg\" },\n            {\n              \"--hf-po\": 1,\n              \"--hf-px\": (i) => Math.cos(i * 0.83) * 250 + \"px\",\n              \"--hf-py\": (i) => -120 - Math.sin(i * 0.61) * 120 + \"px\",\n              \"--hf-pr\": (i) => 180 + i * 37 + \"deg\",\n              duration: 0.8,\n              stagger: 0.015,\n              ease: \"power2.out\",\n            },\n            startTime + 0.2,\n          );\n        }\n        tl.set({}, {}, 5);\n        window.__timelines = window.__timelines || {};\n        window.__timelines[\"spotlight-card-demo\"] = tl;\n      </script>\n    </div>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/docs/public/catalog/components/staggered-fade-up.json b/docs/public/catalog/components/staggered-fade-up.json
index 43210ee611..ecab90b4cb 100644
--- a/docs/public/catalog/components/staggered-fade-up.json
+++ b/docs/public/catalog/components/staggered-fade-up.json
@@ -1 +1 @@
-{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=1920, height=1080\" />\n    <title>Staggered Fade Up - Demo</title>\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      * {\n        box-sizing: border-box;\n      }\n      html,\n      body {\n        margin: 0;\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n      }\n      #demo {\n        width: 1920px;\n        height: 1080px;\n        display: grid;\n        place-items: center;\n        background: var(--bg, #f5f5f4);\n        font-family: var(--font-body, Inter, system-ui, sans-serif);\n      }\n      /* ponytail: zoom on .demo-frame (not a GSAP target) to fill ~65% of frame */\n      .demo-frame {\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        gap: 28px;\n        padding: 72px 96px;\n        zoom: 1.9;\n      }\n      .demo-label {\n        font-size: 13px;\n        font-weight: 500;\n        letter-spacing: 0.1em;\n        text-transform: uppercase;\n        color: var(--muted, #71717a);\n      }\n      .hf-remocn-staggered-fade-up {\n        color: var(--fg, #18181b);\n        font-family: var(--font-display, Inter, system-ui, sans-serif);\n        font-weight: 900;\n        letter-spacing: -0.04em;\n      }\n      .hf-remocn-staggered-fade-up {\n        display: flex;\n        flex-wrap: wrap;\n        gap: 14px 18px;\n        font-size: 72px;\n        line-height: 1.05;\n        max-width: 680px;\n        justify-content: center;\n      }\n      .hf-remocn-staggered-fade-up span {\n        display: inline-block;\n        transform: translate(var(--hf-word-x, 0px), var(--hf-word-y, 0px))\n          scale(var(--hf-word-scale, 1));\n        filter: blur(var(--hf-word-blur, 0px));\n        will-change: transform, filter, opacity;\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"demo\"\n      data-composition-id=\"staggered-fade-up-demo\"\n      data-start=\"0\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n      data-duration=\"5\"\n    >\n      <div class=\"demo-frame\">\n        <div class=\"demo-label\">staggered fade up</div>\n        <div class=\"hf-remocn-staggered-fade-up\">\n          <span>Motion</span><span>that</span><span>tells</span><span>a</span><span>story</span\n          ><span>one</span><span>word</span><span>at</span><span>a</span><span>time</span>\n        </div>\n      </div>\n      <script>\n        const tl = gsap.timeline({ paused: true });\n        const startTime = 0.4;\n        tl.fromTo(\n          \".hf-remocn-staggered-fade-up span\",\n          { opacity: 0, \"--hf-word-y\": \"28px\", \"--hf-word-scale\": 0.92, \"--hf-word-blur\": \"6px\" },\n          {\n            opacity: 1,\n            \"--hf-word-y\": \"0px\",\n            \"--hf-word-scale\": 1,\n            \"--hf-word-blur\": \"0px\",\n            duration: 0.4,\n            stagger: 0.18,\n            ease: \"power3.out\",\n          },\n          startTime,\n        );\n        tl.set({}, {}, 5);\n        window.__timelines = window.__timelines || {};\n        window.__timelines[\"staggered-fade-up-demo\"] = tl;\n      </script>\n    </div>\n  </body>\n</html>\n"}
\ No newline at end of file
+{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=1920, height=1080\" />\n    <title>Staggered Fade Up - Demo</title>\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      * {\n        box-sizing: border-box;\n      }\n      html,\n      body {\n        margin: 0;\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n      }\n      #demo {\n        width: 1920px;\n        height: 1080px;\n        display: grid;\n        place-items: center;\n        background: var(--bg, #f5f5f4);\n        font-family: var(--font-body, Inter, system-ui, sans-serif);\n      }\n      /* ponytail: zoom on .demo-frame (not a GSAP target) to fill ~65% of frame */\n      .demo-frame {\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        gap: 28px;\n        padding: 72px 96px;\n        zoom: 1.9;\n      }\n      .demo-label {\n        font-size: 13px;\n        font-weight: 500;\n        letter-spacing: 0.1em;\n        text-transform: uppercase;\n        color: var(--muted, #71717a);\n      }\n      .hf-catalog-staggered-fade-up {\n        color: var(--fg, #18181b);\n        font-family: var(--font-display, Inter, system-ui, sans-serif);\n        font-weight: 900;\n        letter-spacing: -0.04em;\n      }\n      .hf-catalog-staggered-fade-up {\n        display: flex;\n        flex-wrap: wrap;\n        gap: 14px 18px;\n        font-size: 72px;\n        line-height: 1.05;\n        max-width: 680px;\n        justify-content: center;\n      }\n      .hf-catalog-staggered-fade-up span {\n        display: inline-block;\n        transform: translate(var(--hf-word-x, 0px), var(--hf-word-y, 0px))\n          scale(var(--hf-word-scale, 1));\n        filter: blur(var(--hf-word-blur, 0px));\n        will-change: transform, filter, opacity;\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"demo\"\n      data-composition-id=\"staggered-fade-up-demo\"\n      data-start=\"0\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n      data-duration=\"5\"\n    >\n      <div class=\"demo-frame\">\n        <div class=\"demo-label\">staggered fade up</div>\n        <div class=\"hf-catalog-staggered-fade-up\">\n          <span>Motion</span><span>that</span><span>tells</span><span>a</span><span>story</span\n          ><span>one</span><span>word</span><span>at</span><span>a</span><span>time</span>\n        </div>\n      </div>\n      <script>\n        const tl = gsap.timeline({ paused: true });\n        const startTime = 0.4;\n        tl.fromTo(\n          \".hf-catalog-staggered-fade-up span\",\n          { opacity: 0, \"--hf-word-y\": \"28px\", \"--hf-word-scale\": 0.92, \"--hf-word-blur\": \"6px\" },\n          {\n            opacity: 1,\n            \"--hf-word-y\": \"0px\",\n            \"--hf-word-scale\": 1,\n            \"--hf-word-blur\": \"0px\",\n            duration: 0.4,\n            stagger: 0.18,\n            ease: \"power3.out\",\n          },\n          startTime,\n        );\n        tl.set({}, {}, 5);\n        window.__timelines = window.__timelines || {};\n        window.__timelines[\"staggered-fade-up-demo\"] = tl;\n      </script>\n    </div>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/docs/public/catalog/components/strikethrough-replace.json b/docs/public/catalog/components/strikethrough-replace.json
index 19a66ce109..446f23bddd 100644
--- a/docs/public/catalog/components/strikethrough-replace.json
+++ b/docs/public/catalog/components/strikethrough-replace.json
@@ -1 +1 @@
-{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=1920, height=1080\" />\n    <title>Strikethrough Replace - Demo</title>\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      * {\n        box-sizing: border-box;\n      }\n      html,\n      body {\n        margin: 0;\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n      }\n      #demo {\n        width: 1920px;\n        height: 1080px;\n        display: grid;\n        place-items: center;\n        background: #f7f7f8;\n        font-family: Inter, system-ui, sans-serif;\n      }\n      .demo-frame {\n        display: grid;\n        place-items: center;\n        min-width: 900px;\n        min-height: 500px;\n        padding: 64px;\n        /* ponytail: scale non-GSAP wrapper; GSAP targets are children */\n        transform: scale(2.8);\n      }\n      .hf-remocn-strikethrough-replace {\n        color: #18181b;\n        font-family: Inter, system-ui, sans-serif;\n        font-weight: 900;\n        letter-spacing: -0.04em;\n      }\n      .hf-remocn-strikethrough-replace {\n        position: relative;\n        display: inline-grid;\n        grid-auto-flow: column;\n        gap: 18px;\n        align-items: center;\n        font-size: 58px;\n      }\n      .hf-remocn-strikethrough-replace i {\n        position: absolute;\n        left: 0;\n        width: 48%;\n        height: 6px;\n        border-radius: 999px;\n        background: #ef4444;\n        transform: scaleX(var(--hf-strike-progress, 1));\n        transform-origin: left center;\n      }\n      .hf-remocn-strikethrough-replace strong {\n        opacity: var(--hf-replace-opacity, 1);\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"demo\"\n      data-composition-id=\"strikethrough-replace-demo\"\n      data-start=\"0\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n      data-duration=\"5\"\n    >\n      <div class=\"demo-frame\">\n        <div class=\"hf-remocn-strikethrough-replace\">\n          <span>Slow</span><i></i><strong>Fast</strong>\n        </div>\n      </div>\n      <script>\n        const tl = gsap.timeline({ paused: true });\n        const startTime = 0.5;\n        tl.fromTo(\n          \".hf-remocn-strikethrough-replace i\",\n          { \"--hf-strike-progress\": 0 },\n          { \"--hf-strike-progress\": 1, duration: 0.28, ease: \"power2.out\" },\n          startTime,\n        );\n        tl.fromTo(\n          \".hf-remocn-strikethrough-replace strong\",\n          { \"--hf-replace-opacity\": 0, y: 14 },\n          { \"--hf-replace-opacity\": 1, y: 0, duration: 0.3, ease: \"power2.out\" },\n          startTime + 0.24,\n        );\n        tl.set({}, {}, 5);\n        window.__timelines = window.__timelines || {};\n        window.__timelines[\"strikethrough-replace-demo\"] = tl;\n      </script>\n    </div>\n  </body>\n</html>\n"}
\ No newline at end of file
+{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=1920, height=1080\" />\n    <title>Strikethrough Replace - Demo</title>\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      * {\n        box-sizing: border-box;\n      }\n      html,\n      body {\n        margin: 0;\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n      }\n      #demo {\n        width: 1920px;\n        height: 1080px;\n        display: grid;\n        place-items: center;\n        background: #f7f7f8;\n        font-family: Inter, system-ui, sans-serif;\n      }\n      .demo-frame {\n        display: grid;\n        place-items: center;\n        min-width: 900px;\n        min-height: 500px;\n        padding: 64px;\n        /* ponytail: scale non-GSAP wrapper; GSAP targets are children */\n        transform: scale(2.8);\n      }\n      .hf-catalog-strikethrough-replace {\n        color: #18181b;\n        font-family: Inter, system-ui, sans-serif;\n        font-weight: 900;\n        letter-spacing: -0.04em;\n      }\n      .hf-catalog-strikethrough-replace {\n        position: relative;\n        display: inline-grid;\n        grid-auto-flow: column;\n        gap: 18px;\n        align-items: center;\n        font-size: 58px;\n      }\n      .hf-catalog-strikethrough-replace i {\n        position: absolute;\n        left: 0;\n        width: 48%;\n        height: 6px;\n        border-radius: 999px;\n        background: #ef4444;\n        transform: scaleX(var(--hf-strike-progress, 1));\n        transform-origin: left center;\n      }\n      .hf-catalog-strikethrough-replace strong {\n        opacity: var(--hf-replace-opacity, 1);\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"demo\"\n      data-composition-id=\"strikethrough-replace-demo\"\n      data-start=\"0\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n      data-duration=\"5\"\n    >\n      <div class=\"demo-frame\">\n        <div class=\"hf-catalog-strikethrough-replace\">\n          <span>Slow</span><i></i><strong>Fast</strong>\n        </div>\n      </div>\n      <script>\n        const tl = gsap.timeline({ paused: true });\n        const startTime = 0.5;\n        tl.fromTo(\n          \".hf-catalog-strikethrough-replace i\",\n          { \"--hf-strike-progress\": 0 },\n          { \"--hf-strike-progress\": 1, duration: 0.28, ease: \"power2.out\" },\n          startTime,\n        );\n        tl.fromTo(\n          \".hf-catalog-strikethrough-replace strong\",\n          { \"--hf-replace-opacity\": 0, y: 14 },\n          { \"--hf-replace-opacity\": 1, y: 0, duration: 0.3, ease: \"power2.out\" },\n          startTime + 0.24,\n        );\n        tl.set({}, {}, 5);\n        window.__timelines = window.__timelines || {};\n        window.__timelines[\"strikethrough-replace-demo\"] = tl;\n      </script>\n    </div>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/docs/public/catalog/components/terminal-simulator.json b/docs/public/catalog/components/terminal-simulator.json
index 862752f76d..640b2d0ed5 100644
--- a/docs/public/catalog/components/terminal-simulator.json
+++ b/docs/public/catalog/components/terminal-simulator.json
@@ -1 +1 @@
-{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=1920, height=1080\" />\n    <title>Terminal Simulator - Demo</title>\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      * {\n        box-sizing: border-box;\n      }\n      html,\n      body {\n        margin: 0;\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n      }\n      #demo {\n        width: 1920px;\n        height: 1080px;\n        display: grid;\n        place-items: center;\n        background: #f7f7f8;\n        font-family: Inter, system-ui, sans-serif;\n      }\n      .demo-frame {\n        display: grid;\n        place-items: center;\n        padding: 52px;\n        /* ponytail: scale wrapper (not a GSAP target) to fill ~65% of frame */\n        transform: scale(1.65);\n      }\n      .hf-remocn-terminal-simulator {\n        --hf-accent: var(--accent, #18181b);\n        --hf-ink: #111827;\n        --hf-muted: #6b7280;\n        --hf-surface: #ffffff;\n        color: var(--hf-ink);\n        font-family: Inter, system-ui, sans-serif;\n      }\n      .hf-remocn-terminal-simulator {\n        width: 760px;\n        border-radius: 24px;\n        overflow: hidden;\n        background: #0f172a;\n        color: #e4e4e7;\n        box-shadow: 0 28px 80px rgba(15, 23, 42, 0.2);\n        font-family: ui-monospace, SFMono-Regular, Menlo, monospace;\n      }\n      .hf-remocn-terminal-simulator .chrome {\n        height: 48px;\n        display: flex;\n        align-items: center;\n        gap: 8px;\n        padding: 0 18px;\n        background: #111827;\n        color: #94a3b8;\n        font-size: 14px;\n      }\n      .hf-remocn-terminal-simulator .dot {\n        width: 11px;\n        height: 11px;\n        border-radius: 999px;\n        background: #ef4444;\n        box-shadow:\n          18px 0 #f59e0b,\n          36px 0 #22c55e;\n      }\n      .hf-remocn-terminal-simulator .body {\n        display: grid;\n        grid-template-columns: 210px 1fr;\n        min-height: 340px;\n      }\n      .hf-remocn-terminal-simulator .files {\n        padding: 22px;\n        border-right: 1px solid rgba(148, 163, 184, 0.18);\n        color: #94a3b8;\n        font-size: 15px;\n        line-height: 1.8;\n      }\n      .hf-remocn-terminal-simulator .editor {\n        padding: 22px;\n        display: grid;\n        gap: 14px;\n      }\n      .hf-remocn-terminal-simulator .line {\n        display: block;\n        height: 18px;\n        border-radius: 999px;\n        background: rgba(228, 228, 231, 0.18);\n        transform: scaleX(var(--hf-line, 1));\n        transform-origin: left center;\n        opacity: var(--hf-line-opacity, 1);\n      }\n      .hf-remocn-terminal-simulator .terminal {\n        padding: 18px 22px 24px;\n        border-top: 1px solid rgba(148, 163, 184, 0.18);\n        color: #86efac;\n        min-height: 78px;\n        font-size: 15px;\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"demo\"\n      data-composition-id=\"terminal-simulator-demo\"\n      data-start=\"0\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n      data-duration=\"5\"\n    >\n      <div class=\"demo-frame\">\n        <div class=\"hf-remocn-terminal-simulator\">\n          <div class=\"chrome\"><span class=\"dot\"></span><span>Terminal Simulator</span></div>\n          <div class=\"body\">\n            <div class=\"files\">index.html<br />style.css<br />timeline.js</div>\n            <div class=\"editor\">\n              <span class=\"line\" style=\"width: 92%\"></span\n              ><span class=\"line\" style=\"width: 72%\"></span\n              ><span class=\"line\" style=\"width: 84%\"></span\n              ><span class=\"line\" style=\"width: 58%\"></span\n              ><span class=\"line\" style=\"width: 78%\"></span>\n            </div>\n          </div>\n          <div class=\"terminal\">$ hyperframes render --skill=terminal-simulator</div>\n        </div>\n      </div>\n      <script>\n        const tl = gsap.timeline({ paused: true });\n        const startTime = 0.5;\n        tl.fromTo(\n          \".hf-remocn-terminal-simulator .line\",\n          { \"--hf-line\": 0, \"--hf-line-opacity\": 0 },\n          {\n            \"--hf-line\": 1,\n            \"--hf-line-opacity\": 1,\n            duration: 0.24,\n            stagger: 0.08,\n            ease: \"power2.out\",\n          },\n          startTime,\n        );\n        tl.fromTo(\n          \".hf-remocn-terminal-simulator .terminal\",\n          { opacity: 0, y: 16 },\n          { opacity: 1, y: 0, duration: 0.34, ease: \"power2.out\" },\n          startTime + 0.48,\n        );\n        tl.set({}, {}, 5);\n        window.__timelines = window.__timelines || {};\n        window.__timelines[\"terminal-simulator-demo\"] = tl;\n      </script>\n    </div>\n  </body>\n</html>\n"}
\ No newline at end of file
+{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=1920, height=1080\" />\n    <title>Terminal Simulator - Demo</title>\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      * {\n        box-sizing: border-box;\n      }\n      html,\n      body {\n        margin: 0;\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n      }\n      #demo {\n        width: 1920px;\n        height: 1080px;\n        display: grid;\n        place-items: center;\n        background: #f7f7f8;\n        font-family: Inter, system-ui, sans-serif;\n      }\n      .demo-frame {\n        display: grid;\n        place-items: center;\n        padding: 52px;\n        /* ponytail: scale wrapper (not a GSAP target) to fill ~65% of frame */\n        transform: scale(1.65);\n      }\n      .hf-catalog-terminal-simulator {\n        --hf-accent: var(--accent, #18181b);\n        --hf-ink: #111827;\n        --hf-muted: #6b7280;\n        --hf-surface: #ffffff;\n        color: var(--hf-ink);\n        font-family: Inter, system-ui, sans-serif;\n      }\n      .hf-catalog-terminal-simulator {\n        width: 760px;\n        border-radius: 24px;\n        overflow: hidden;\n        background: #0f172a;\n        color: #e4e4e7;\n        box-shadow: 0 28px 80px rgba(15, 23, 42, 0.2);\n        font-family: ui-monospace, SFMono-Regular, Menlo, monospace;\n      }\n      .hf-catalog-terminal-simulator .chrome {\n        height: 48px;\n        display: flex;\n        align-items: center;\n        gap: 8px;\n        padding: 0 18px;\n        background: #111827;\n        color: #94a3b8;\n        font-size: 14px;\n      }\n      .hf-catalog-terminal-simulator .dot {\n        width: 11px;\n        height: 11px;\n        border-radius: 999px;\n        background: #ef4444;\n        box-shadow:\n          18px 0 #f59e0b,\n          36px 0 #22c55e;\n      }\n      .hf-catalog-terminal-simulator .body {\n        display: grid;\n        grid-template-columns: 210px 1fr;\n        min-height: 340px;\n      }\n      .hf-catalog-terminal-simulator .files {\n        padding: 22px;\n        border-right: 1px solid rgba(148, 163, 184, 0.18);\n        color: #94a3b8;\n        font-size: 15px;\n        line-height: 1.8;\n      }\n      .hf-catalog-terminal-simulator .editor {\n        padding: 22px;\n        display: grid;\n        gap: 14px;\n      }\n      .hf-catalog-terminal-simulator .line {\n        display: block;\n        height: 18px;\n        border-radius: 999px;\n        background: rgba(228, 228, 231, 0.18);\n        transform: scaleX(var(--hf-line, 1));\n        transform-origin: left center;\n        opacity: var(--hf-line-opacity, 1);\n      }\n      .hf-catalog-terminal-simulator .terminal {\n        padding: 18px 22px 24px;\n        border-top: 1px solid rgba(148, 163, 184, 0.18);\n        color: #86efac;\n        min-height: 78px;\n        font-size: 15px;\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"demo\"\n      data-composition-id=\"terminal-simulator-demo\"\n      data-start=\"0\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n      data-duration=\"5\"\n    >\n      <div class=\"demo-frame\">\n        <div class=\"hf-catalog-terminal-simulator\">\n          <div class=\"chrome\"><span class=\"dot\"></span><span>Terminal Simulator</span></div>\n          <div class=\"body\">\n            <div class=\"files\">index.html<br />style.css<br />timeline.js</div>\n            <div class=\"editor\">\n              <span class=\"line\" style=\"width: 92%\"></span\n              ><span class=\"line\" style=\"width: 72%\"></span\n              ><span class=\"line\" style=\"width: 84%\"></span\n              ><span class=\"line\" style=\"width: 58%\"></span\n              ><span class=\"line\" style=\"width: 78%\"></span>\n            </div>\n          </div>\n          <div class=\"terminal\">$ hyperframes render --skill=terminal-simulator</div>\n        </div>\n      </div>\n      <script>\n        const tl = gsap.timeline({ paused: true });\n        const startTime = 0.5;\n        tl.fromTo(\n          \".hf-catalog-terminal-simulator .line\",\n          { \"--hf-line\": 0, \"--hf-line-opacity\": 0 },\n          {\n            \"--hf-line\": 1,\n            \"--hf-line-opacity\": 1,\n            duration: 0.24,\n            stagger: 0.08,\n            ease: \"power2.out\",\n          },\n          startTime,\n        );\n        tl.fromTo(\n          \".hf-catalog-terminal-simulator .terminal\",\n          { opacity: 0, y: 16 },\n          { opacity: 1, y: 0, duration: 0.34, ease: \"power2.out\" },\n          startTime + 0.48,\n        );\n        tl.set({}, {}, 5);\n        window.__timelines = window.__timelines || {};\n        window.__timelines[\"terminal-simulator-demo\"] = tl;\n      </script>\n    </div>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/docs/public/catalog/components/top-down-letters.json b/docs/public/catalog/components/top-down-letters.json
index 5ca8bea60e..52a35b88e6 100644
--- a/docs/public/catalog/components/top-down-letters.json
+++ b/docs/public/catalog/components/top-down-letters.json
@@ -1 +1 @@
-{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=1920, height=1080\" />\n    <title>Top-Down Letters - Demo</title>\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      * {\n        box-sizing: border-box;\n      }\n      html,\n      body {\n        margin: 0;\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n      }\n      #demo {\n        width: 1920px;\n        height: 1080px;\n        display: grid;\n        place-items: center;\n        background: #f7f7f8;\n        font-family: Inter, system-ui, sans-serif;\n      }\n      .demo-frame {\n        display: grid;\n        place-items: center;\n        min-width: 900px;\n        min-height: 500px;\n        padding: 64px;\n        /* ponytail: scale wrapper (not a GSAP target) to fill ~65% of frame width */\n        transform: scale(3.2);\n      }\n      .hf-remocn-top-down-letters {\n        color: #18181b;\n        font-family: Inter, system-ui, sans-serif;\n        font-weight: 900;\n        letter-spacing: -0.04em;\n      }\n      .hf-remocn-top-down-letters {\n        display: inline-flex;\n        gap: 1px;\n        font-size: 74px;\n        line-height: 0.9;\n        overflow: hidden;\n      }\n      .hf-remocn-top-down-letters span {\n        display: inline-block;\n        transform: translateY(var(--hf-char-y, 0px));\n        will-change: transform, opacity;\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"demo\"\n      data-composition-id=\"top-down-letters-demo\"\n      data-start=\"0\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n      data-duration=\"5\"\n    >\n      <div class=\"demo-frame\">\n        <div class=\"hf-remocn-top-down-letters\">\n          <span>C</span><span>A</span><span>S</span><span>C</span><span>A</span><span>D</span\n          ><span>E</span>\n        </div>\n      </div>\n      <script>\n        const tl = gsap.timeline({ paused: true });\n        const startTime = 0.5;\n        tl.fromTo(\n          \".hf-remocn-top-down-letters span\",\n          { opacity: 0, \"--hf-char-y\": \"-42px\" },\n          { opacity: 1, \"--hf-char-y\": \"0px\", duration: 0.22, stagger: 0.035, ease: \"power3.out\" },\n          startTime,\n        );\n        tl.set({}, {}, 5);\n        window.__timelines = window.__timelines || {};\n        window.__timelines[\"top-down-letters-demo\"] = tl;\n      </script>\n    </div>\n  </body>\n</html>\n"}
\ No newline at end of file
+{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=1920, height=1080\" />\n    <title>Top-Down Letters - Demo</title>\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      * {\n        box-sizing: border-box;\n      }\n      html,\n      body {\n        margin: 0;\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n      }\n      #demo {\n        width: 1920px;\n        height: 1080px;\n        display: grid;\n        place-items: center;\n        background: #f7f7f8;\n        font-family: Inter, system-ui, sans-serif;\n      }\n      .demo-frame {\n        display: grid;\n        place-items: center;\n        min-width: 900px;\n        min-height: 500px;\n        padding: 64px;\n        /* ponytail: scale wrapper (not a GSAP target) to fill ~65% of frame width */\n        transform: scale(3.2);\n      }\n      .hf-catalog-top-down-letters {\n        color: #18181b;\n        font-family: Inter, system-ui, sans-serif;\n        font-weight: 900;\n        letter-spacing: -0.04em;\n      }\n      .hf-catalog-top-down-letters {\n        display: inline-flex;\n        gap: 1px;\n        font-size: 74px;\n        line-height: 0.9;\n        overflow: hidden;\n      }\n      .hf-catalog-top-down-letters span {\n        display: inline-block;\n        transform: translateY(var(--hf-char-y, 0px));\n        will-change: transform, opacity;\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"demo\"\n      data-composition-id=\"top-down-letters-demo\"\n      data-start=\"0\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n      data-duration=\"5\"\n    >\n      <div class=\"demo-frame\">\n        <div class=\"hf-catalog-top-down-letters\">\n          <span>C</span><span>A</span><span>S</span><span>C</span><span>A</span><span>D</span\n          ><span>E</span>\n        </div>\n      </div>\n      <script>\n        const tl = gsap.timeline({ paused: true });\n        const startTime = 0.5;\n        tl.fromTo(\n          \".hf-catalog-top-down-letters span\",\n          { opacity: 0, \"--hf-char-y\": \"-42px\" },\n          { opacity: 1, \"--hf-char-y\": \"0px\", duration: 0.22, stagger: 0.035, ease: \"power3.out\" },\n          startTime,\n        );\n        tl.set({}, {}, 5);\n        window.__timelines = window.__timelines || {};\n        window.__timelines[\"top-down-letters-demo\"] = tl;\n      </script>\n    </div>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/docs/public/catalog/components/typewriter.json b/docs/public/catalog/components/typewriter.json
index 7cb5811e94..6f07cb186d 100644
--- a/docs/public/catalog/components/typewriter.json
+++ b/docs/public/catalog/components/typewriter.json
@@ -1 +1 @@
-{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=1920, height=1080\" />\n    <title>Typewriter - Demo</title>\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      * {\n        box-sizing: border-box;\n      }\n      html,\n      body {\n        margin: 0;\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n      }\n      #demo {\n        width: 1920px;\n        height: 1080px;\n        display: grid;\n        place-items: center;\n        background: #f7f7f8;\n        font-family: Inter, system-ui, sans-serif;\n      }\n      .demo-frame {\n        display: grid;\n        place-items: center;\n        min-width: 900px;\n        min-height: 500px;\n        padding: 64px;\n        /* ponytail: scale-up only; GSAP targets .hf-remocn-typewriter with CSS vars, not transforms */\n        transform: scale(2);\n      }\n      .hf-remocn-typewriter {\n        color: #18181b;\n        font-family: Inter, system-ui, sans-serif;\n        font-weight: 900;\n        letter-spacing: -0.04em;\n      }\n      .hf-remocn-typewriter {\n        display: inline-flex;\n        align-items: center;\n        gap: 6px;\n        font:\n          800 52px/1.2 ui-monospace,\n          SFMono-Regular,\n          Menlo,\n          monospace;\n      }\n      .hf-remocn-typewriter span {\n        display: inline-block;\n        max-width: calc(var(--hf-type-progress, 1) * 100%);\n        overflow: hidden;\n        white-space: nowrap;\n      }\n      .hf-remocn-typewriter i {\n        width: 3px;\n        height: 52px;\n        border-radius: 999px;\n        background: #18181b;\n        opacity: var(--hf-caret-opacity, 1);\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"demo\"\n      data-composition-id=\"typewriter-demo\"\n      data-start=\"0\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n      data-duration=\"5\"\n    >\n      <div class=\"demo-frame\">\n        <div class=\"hf-remocn-typewriter\"><span>hyperframes add typewriter</span><i></i></div>\n      </div>\n      <script>\n        const tl = gsap.timeline({ paused: true });\n        const startTime = 0.5;\n        tl.fromTo(\n          \".hf-remocn-typewriter\",\n          { \"--hf-type-progress\": 0 },\n          { \"--hf-type-progress\": 1, duration: 1.2, ease: \"steps(28)\" },\n          startTime,\n        );\n        tl.to(\n          \".hf-remocn-typewriter i\",\n          { \"--hf-caret-opacity\": 0.2, duration: 0.24, repeat: 7, yoyo: true, ease: \"none\" },\n          startTime + 0.2,\n        );\n        tl.set({}, {}, 5);\n        window.__timelines = window.__timelines || {};\n        window.__timelines[\"typewriter-demo\"] = tl;\n      </script>\n    </div>\n  </body>\n</html>\n"}
\ No newline at end of file
+{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=1920, height=1080\" />\n    <title>Typewriter - Demo</title>\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      * {\n        box-sizing: border-box;\n      }\n      html,\n      body {\n        margin: 0;\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n      }\n      #demo {\n        width: 1920px;\n        height: 1080px;\n        display: grid;\n        place-items: center;\n        background: #f7f7f8;\n        font-family: Inter, system-ui, sans-serif;\n      }\n      .demo-frame {\n        display: grid;\n        place-items: center;\n        min-width: 900px;\n        min-height: 500px;\n        padding: 64px;\n        /* ponytail: scale-up only; GSAP targets .hf-catalog-typewriter with CSS vars, not transforms */\n        transform: scale(2);\n      }\n      .hf-catalog-typewriter {\n        color: #18181b;\n        font-family: Inter, system-ui, sans-serif;\n        font-weight: 900;\n        letter-spacing: -0.04em;\n      }\n      .hf-catalog-typewriter {\n        display: inline-flex;\n        align-items: center;\n        gap: 6px;\n        font:\n          800 52px/1.2 ui-monospace,\n          SFMono-Regular,\n          Menlo,\n          monospace;\n      }\n      .hf-catalog-typewriter span {\n        display: inline-block;\n        max-width: calc(var(--hf-type-progress, 1) * 100%);\n        overflow: hidden;\n        white-space: nowrap;\n      }\n      .hf-catalog-typewriter i {\n        width: 3px;\n        height: 52px;\n        border-radius: 999px;\n        background: #18181b;\n        opacity: var(--hf-caret-opacity, 1);\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"demo\"\n      data-composition-id=\"typewriter-demo\"\n      data-start=\"0\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n      data-duration=\"5\"\n    >\n      <div class=\"demo-frame\">\n        <div class=\"hf-catalog-typewriter\"><span>hyperframes add typewriter</span><i></i></div>\n      </div>\n      <script>\n        const tl = gsap.timeline({ paused: true });\n        const startTime = 0.5;\n        tl.fromTo(\n          \".hf-catalog-typewriter\",\n          { \"--hf-type-progress\": 0 },\n          { \"--hf-type-progress\": 1, duration: 1.2, ease: \"steps(28)\" },\n          startTime,\n        );\n        tl.to(\n          \".hf-catalog-typewriter i\",\n          { \"--hf-caret-opacity\": 0.2, duration: 0.24, repeat: 7, yoyo: true, ease: \"none\" },\n          startTime + 0.2,\n        );\n        tl.set({}, {}, 5);\n        window.__timelines = window.__timelines || {};\n        window.__timelines[\"typewriter-demo\"] = tl;\n      </script>\n    </div>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/docs/public/catalog/components/x-follow-card.json b/docs/public/catalog/components/x-follow-card.json
index 144d7fb5a8..f82d6f91ed 100644
--- a/docs/public/catalog/components/x-follow-card.json
+++ b/docs/public/catalog/components/x-follow-card.json
@@ -1 +1 @@
-{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=1920, height=1080\" />\n    <title>X Follow Card - Demo</title>\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      * {\n        box-sizing: border-box;\n      }\n      html,\n      body {\n        margin: 0;\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n      }\n      #demo {\n        width: 1920px;\n        height: 1080px;\n        display: grid;\n        place-items: center;\n        background: #fafafa;\n        font-family: Inter, system-ui, sans-serif;\n      }\n      .demo-frame {\n        display: grid;\n        place-items: center;\n        padding: 52px;\n        /* ponytail: scale wrapper (not a GSAP target) to fill ~65% of 1920px frame */\n        transform: scale(1.9);\n        transform-origin: center center;\n      }\n      .hf-remocn-x-follow-card {\n        --hf-accent: var(--accent, #f8fafc);\n        --hf-ink: #111827;\n        --hf-l1: rgba(255, 255, 255, 0.72);\n        --hf-l2: rgba(255, 255, 255, 0.45);\n        --hf-muted: #6b7280;\n        --hf-surface: #ffffff;\n        color: var(--hf-ink);\n        font-family: Inter, system-ui, sans-serif;\n      }\n      .hf-remocn-x-follow-card {\n        width: 700px;\n        border-radius: 30px;\n        padding: 34px;\n        background: #0f172a;\n        color: #fff;\n        box-shadow: 0 28px 80px rgba(15, 23, 42, 0.2);\n      }\n      .hf-remocn-x-follow-card header {\n        display: flex;\n        align-items: center;\n        gap: 16px;\n      }\n      .hf-remocn-x-follow-card .avatar {\n        width: 70px;\n        height: 70px;\n        border-radius: 22px;\n        background: var(--hf-l1);\n      }\n      .hf-remocn-x-follow-card h3 {\n        margin: 0;\n        font-size: 36px;\n        letter-spacing: -0.04em;\n      }\n      .hf-remocn-x-follow-card p {\n        color: #94a3b8;\n        margin: 4px 0 0;\n        font-size: 18px;\n      }\n      .hf-remocn-x-follow-card .stat {\n        margin-top: 30px;\n        font-size: 82px;\n        font-weight: 900;\n        letter-spacing: -0.08em;\n        transform: translateY(var(--hf-stat-y, 0px));\n      }\n      .hf-remocn-x-follow-card .avatars {\n        display: flex;\n        margin-top: 18px;\n      }\n      .hf-remocn-x-follow-card .avatars span {\n        width: 46px;\n        height: 46px;\n        border-radius: 999px;\n        border: 3px solid #0f172a;\n        margin-left: -10px;\n        background: var(--c);\n        opacity: var(--hf-avatar-opacity, 1);\n        transform: translateY(var(--hf-avatar-y, 0px));\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"demo\"\n      data-composition-id=\"x-follow-card-demo\"\n      data-start=\"0\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n      data-duration=\"5\"\n    >\n      <div class=\"demo-frame\">\n        <div class=\"hf-remocn-x-follow-card\">\n          <header>\n            <div class=\"avatar\"></div>\n            <div>\n              <h3>X Follow Card</h3>\n              <p>A social follow card with avatar, handle, and follower motion.</p>\n            </div>\n          </header>\n          <div class=\"stat\">30.6K</div>\n          <div class=\"avatars\">\n            <span style=\"--c: var(--hf-l1)\"></span><span style=\"--c: var(--hf-l2)\"></span\n            ><span style=\"--c: var(--hf-l2)\"></span><span style=\"--c: var(--hf-l2)\"></span\n            ><span style=\"--c: var(--hf-l2)\"></span><span style=\"--c: var(--hf-l2)\"></span>\n          </div>\n        </div>\n      </div>\n      <script>\n        const tl = gsap.timeline({ paused: true });\n        const startTime = 0.5;\n        tl.fromTo(\n          \".hf-remocn-x-follow-card .stat\",\n          { \"--hf-stat-y\": \"28px\", opacity: 0 },\n          { \"--hf-stat-y\": \"0px\", opacity: 1, duration: 0.46, ease: \"back.out(1.6)\" },\n          startTime,\n        );\n        tl.fromTo(\n          \".hf-remocn-x-follow-card .avatars span\",\n          { \"--hf-avatar-y\": \"18px\", \"--hf-avatar-opacity\": 0 },\n          {\n            \"--hf-avatar-y\": \"0px\",\n            \"--hf-avatar-opacity\": 1,\n            duration: 0.28,\n            stagger: 0.05,\n            ease: \"power2.out\",\n          },\n          startTime + 0.22,\n        );\n        tl.set({}, {}, 5);\n        window.__timelines = window.__timelines || {};\n        window.__timelines[\"x-follow-card-demo\"] = tl;\n      </script>\n    </div>\n  </body>\n</html>\n"}
\ No newline at end of file
+{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=1920, height=1080\" />\n    <title>X Follow Card - Demo</title>\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      * {\n        box-sizing: border-box;\n      }\n      html,\n      body {\n        margin: 0;\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n      }\n      #demo {\n        width: 1920px;\n        height: 1080px;\n        display: grid;\n        place-items: center;\n        background: #fafafa;\n        font-family: Inter, system-ui, sans-serif;\n      }\n      .demo-frame {\n        display: grid;\n        place-items: center;\n        padding: 52px;\n        /* ponytail: scale wrapper (not a GSAP target) to fill ~65% of 1920px frame */\n        transform: scale(1.9);\n        transform-origin: center center;\n      }\n      .hf-catalog-x-follow-card {\n        --hf-accent: var(--accent, #f8fafc);\n        --hf-ink: #111827;\n        --hf-l1: rgba(255, 255, 255, 0.72);\n        --hf-l2: rgba(255, 255, 255, 0.45);\n        --hf-muted: #6b7280;\n        --hf-surface: #ffffff;\n        color: var(--hf-ink);\n        font-family: Inter, system-ui, sans-serif;\n      }\n      .hf-catalog-x-follow-card {\n        width: 700px;\n        border-radius: 30px;\n        padding: 34px;\n        background: #0f172a;\n        color: #fff;\n        box-shadow: 0 28px 80px rgba(15, 23, 42, 0.2);\n      }\n      .hf-catalog-x-follow-card header {\n        display: flex;\n        align-items: center;\n        gap: 16px;\n      }\n      .hf-catalog-x-follow-card .avatar {\n        width: 70px;\n        height: 70px;\n        border-radius: 22px;\n        background: var(--hf-l1);\n      }\n      .hf-catalog-x-follow-card h3 {\n        margin: 0;\n        font-size: 36px;\n        letter-spacing: -0.04em;\n      }\n      .hf-catalog-x-follow-card p {\n        color: #94a3b8;\n        margin: 4px 0 0;\n        font-size: 18px;\n      }\n      .hf-catalog-x-follow-card .stat {\n        margin-top: 30px;\n        font-size: 82px;\n        font-weight: 900;\n        letter-spacing: -0.08em;\n        transform: translateY(var(--hf-stat-y, 0px));\n      }\n      .hf-catalog-x-follow-card .avatars {\n        display: flex;\n        margin-top: 18px;\n      }\n      .hf-catalog-x-follow-card .avatars span {\n        width: 46px;\n        height: 46px;\n        border-radius: 999px;\n        border: 3px solid #0f172a;\n        margin-left: -10px;\n        background: var(--c);\n        opacity: var(--hf-avatar-opacity, 1);\n        transform: translateY(var(--hf-avatar-y, 0px));\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"demo\"\n      data-composition-id=\"x-follow-card-demo\"\n      data-start=\"0\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n      data-duration=\"5\"\n    >\n      <div class=\"demo-frame\">\n        <div class=\"hf-catalog-x-follow-card\">\n          <header>\n            <div class=\"avatar\"></div>\n            <div>\n              <h3>X Follow Card</h3>\n              <p>A social follow card with avatar, handle, and follower motion.</p>\n            </div>\n          </header>\n          <div class=\"stat\">30.6K</div>\n          <div class=\"avatars\">\n            <span style=\"--c: var(--hf-l1)\"></span><span style=\"--c: var(--hf-l2)\"></span\n            ><span style=\"--c: var(--hf-l2)\"></span><span style=\"--c: var(--hf-l2)\"></span\n            ><span style=\"--c: var(--hf-l2)\"></span><span style=\"--c: var(--hf-l2)\"></span>\n          </div>\n        </div>\n      </div>\n      <script>\n        const tl = gsap.timeline({ paused: true });\n        const startTime = 0.5;\n        tl.fromTo(\n          \".hf-catalog-x-follow-card .stat\",\n          { \"--hf-stat-y\": \"28px\", opacity: 0 },\n          { \"--hf-stat-y\": \"0px\", opacity: 1, duration: 0.46, ease: \"back.out(1.6)\" },\n          startTime,\n        );\n        tl.fromTo(\n          \".hf-catalog-x-follow-card .avatars span\",\n          { \"--hf-avatar-y\": \"18px\", \"--hf-avatar-opacity\": 0 },\n          {\n            \"--hf-avatar-y\": \"0px\",\n            \"--hf-avatar-opacity\": 1,\n            duration: 0.28,\n            stagger: 0.05,\n            ease: \"power2.out\",\n          },\n          startTime + 0.22,\n        );\n        tl.set({}, {}, 5);\n        window.__timelines = window.__timelines || {};\n        window.__timelines[\"x-follow-card-demo\"] = tl;\n      </script>\n    </div>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/docs/public/catalog/components/zoom-through-transition.json b/docs/public/catalog/components/zoom-through-transition.json
index e0e15918b0..105969319c 100644
--- a/docs/public/catalog/components/zoom-through-transition.json
+++ b/docs/public/catalog/components/zoom-through-transition.json
@@ -1 +1 @@
-{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=1920, height=1080\" />\n    <title>Zoom Through Transition - Demo</title>\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      * {\n        box-sizing: border-box;\n      }\n      html,\n      body {\n        margin: 0;\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n      }\n      #demo {\n        width: 1920px;\n        height: 1080px;\n        display: grid;\n        place-items: center;\n        background: #f7f7f8;\n        font-family: Inter, system-ui, sans-serif;\n      }\n      .demo-frame {\n        display: grid;\n        place-items: center;\n        padding: 52px;\n        /* ponytail: scale non-animated wrapper to fill ~65% of 1920×1080 */\n        transform: scale(1.7);\n      }\n      .hf-remocn-zoom-through-transition {\n        --hf-accent: var(--accent, rgba(255, 255, 255, 0.28));\n        --hf-l1: rgba(255, 255, 255, 0.72);\n        --hf-l3: rgba(255, 255, 255, 0.18);\n        --hf-l4: rgba(255, 255, 255, 0.08);\n        --hf-hair: rgba(255, 255, 255, 0.14);\n        --hf-ink: #111827;\n        --hf-muted: #6b7280;\n        --hf-surface: #ffffff;\n        color: var(--hf-ink);\n        font-family: Inter, system-ui, sans-serif;\n      }\n      .hf-remocn-zoom-through-transition {\n        position: relative;\n        width: 760px;\n        height: 428px;\n        overflow: hidden;\n        border-radius: 30px;\n        background: #111827;\n        box-shadow: 0 28px 80px rgba(15, 23, 42, 0.2);\n      }\n      .hf-remocn-zoom-through-transition .scene {\n        position: absolute;\n        inset: 0;\n        display: grid;\n        place-items: center;\n        font-weight: 900;\n        font-size: 58px;\n        letter-spacing: -0.05em;\n        color: #fff;\n      }\n      .hf-remocn-zoom-through-transition .from {\n        background:\n          repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 4px),\n          var(--hf-l4);\n        transform: translate(var(--hf-from-x, 0px), var(--hf-from-y, 0px))\n          scale(var(--hf-from-scale, 1));\n        filter: blur(var(--hf-from-blur, 0px));\n      }\n      .hf-remocn-zoom-through-transition .to {\n        background:\n          repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 4px),\n          var(--hf-l3);\n        box-shadow: inset 0 0 0 2px var(--hf-accent);\n        transform: translate(var(--hf-to-x, 0px), var(--hf-to-y, 0px)) scale(var(--hf-to-scale, 1));\n        clip-path: inset(\n          var(--hf-clip-top, 0%) var(--hf-clip-right, 100%) var(--hf-clip-bottom, 0%)\n            var(--hf-clip-left, 0%)\n        );\n      }\n      .hf-remocn-zoom-through-transition .fx {\n        position: absolute;\n        inset: 0;\n        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.75), transparent);\n        mix-blend-mode: screen;\n        transform: translateX(var(--hf-fx-x, -110%));\n      }\n      .hf-remocn-zoom-through-transition .rgb {\n        position: absolute;\n        inset: 0;\n        pointer-events: none;\n        opacity: var(--hf-rgb-opacity, 0);\n        background: linear-gradient(\n          90deg,\n          rgba(239, 68, 68, 0.35),\n          transparent,\n          rgba(34, 211, 238, 0.35)\n        );\n        transform: translateX(var(--hf-rgb-x, 0px));\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"demo\"\n      data-composition-id=\"zoom-through-transition-demo\"\n      data-start=\"0\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n      data-duration=\"5\"\n    >\n      <div class=\"demo-frame\">\n        <div class=\"hf-remocn-zoom-through-transition\">\n          <div class=\"scene from\">Before</div>\n          <div class=\"scene to\">Zoom Through Transition</div>\n          <div class=\"fx\"></div>\n          <div class=\"rgb\"></div>\n        </div>\n      </div>\n      <script>\n        const tl = gsap.timeline({ paused: true });\n        const startTime = 0.5;\n        tl.fromTo(\n          \".hf-remocn-zoom-through-transition .to\",\n          { \"--hf-clip-right\": \"100%\", \"--hf-to-x\": \"60px\", \"--hf-to-scale\": 1.04 },\n          {\n            \"--hf-clip-right\": \"0%\",\n            \"--hf-to-x\": \"0px\",\n            \"--hf-to-scale\": 1,\n            duration: 0.9,\n            ease: \"power3.inOut\",\n          },\n          startTime,\n        );\n        tl.to(\n          \".hf-remocn-zoom-through-transition .from\",\n          {\n            \"--hf-from-x\": \"-70px\",\n            \"--hf-from-scale\": 0.96,\n            \"--hf-from-blur\": \"5px\",\n            duration: 0.9,\n            ease: \"power3.inOut\",\n          },\n          startTime,\n        );\n        tl.fromTo(\n          \".hf-remocn-zoom-through-transition .fx\",\n          { \"--hf-fx-x\": \"-110%\" },\n          { \"--hf-fx-x\": \"110%\", duration: 0.58, ease: \"power2.inOut\" },\n          startTime + 0.18,\n        );\n        tl.fromTo(\n          \".hf-remocn-zoom-through-transition .rgb\",\n          { \"--hf-rgb-opacity\": 0, \"--hf-rgb-x\": \"-16px\" },\n          {\n            \"--hf-rgb-opacity\": 1,\n            \"--hf-rgb-x\": \"16px\",\n            repeat: 3,\n            yoyo: true,\n            duration: 0.07,\n            ease: \"steps(1)\",\n          },\n          startTime + 0.32,\n        );\n        tl.set({}, {}, 5);\n        window.__timelines = window.__timelines || {};\n        window.__timelines[\"zoom-through-transition-demo\"] = tl;\n      </script>\n    </div>\n  </body>\n</html>\n"}
\ No newline at end of file
+{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=1920, height=1080\" />\n    <title>Zoom Through Transition - Demo</title>\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      * {\n        box-sizing: border-box;\n      }\n      html,\n      body {\n        margin: 0;\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n      }\n      #demo {\n        width: 1920px;\n        height: 1080px;\n        display: grid;\n        place-items: center;\n        background: #f7f7f8;\n        font-family: Inter, system-ui, sans-serif;\n      }\n      .demo-frame {\n        display: grid;\n        place-items: center;\n        padding: 52px;\n        /* ponytail: scale non-animated wrapper to fill ~65% of 1920×1080 */\n        transform: scale(1.7);\n      }\n      .hf-catalog-zoom-through-transition {\n        --hf-accent: var(--accent, rgba(255, 255, 255, 0.28));\n        --hf-l1: rgba(255, 255, 255, 0.72);\n        --hf-l3: rgba(255, 255, 255, 0.18);\n        --hf-l4: rgba(255, 255, 255, 0.08);\n        --hf-hair: rgba(255, 255, 255, 0.14);\n        --hf-ink: #111827;\n        --hf-muted: #6b7280;\n        --hf-surface: #ffffff;\n        color: var(--hf-ink);\n        font-family: Inter, system-ui, sans-serif;\n      }\n      .hf-catalog-zoom-through-transition {\n        position: relative;\n        width: 760px;\n        height: 428px;\n        overflow: hidden;\n        border-radius: 30px;\n        background: #111827;\n        box-shadow: 0 28px 80px rgba(15, 23, 42, 0.2);\n      }\n      .hf-catalog-zoom-through-transition .scene {\n        position: absolute;\n        inset: 0;\n        display: grid;\n        place-items: center;\n        font-weight: 900;\n        font-size: 58px;\n        letter-spacing: -0.05em;\n        color: #fff;\n      }\n      .hf-catalog-zoom-through-transition .from {\n        background:\n          repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 4px),\n          var(--hf-l4);\n        transform: translate(var(--hf-from-x, 0px), var(--hf-from-y, 0px))\n          scale(var(--hf-from-scale, 1));\n        filter: blur(var(--hf-from-blur, 0px));\n      }\n      .hf-catalog-zoom-through-transition .to {\n        background:\n          repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 4px),\n          var(--hf-l3);\n        box-shadow: inset 0 0 0 2px var(--hf-accent);\n        transform: translate(var(--hf-to-x, 0px), var(--hf-to-y, 0px)) scale(var(--hf-to-scale, 1));\n        clip-path: inset(\n          var(--hf-clip-top, 0%) var(--hf-clip-right, 100%) var(--hf-clip-bottom, 0%)\n            var(--hf-clip-left, 0%)\n        );\n      }\n      .hf-catalog-zoom-through-transition .fx {\n        position: absolute;\n        inset: 0;\n        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.75), transparent);\n        mix-blend-mode: screen;\n        transform: translateX(var(--hf-fx-x, -110%));\n      }\n      .hf-catalog-zoom-through-transition .rgb {\n        position: absolute;\n        inset: 0;\n        pointer-events: none;\n        opacity: var(--hf-rgb-opacity, 0);\n        background: linear-gradient(\n          90deg,\n          rgba(239, 68, 68, 0.35),\n          transparent,\n          rgba(34, 211, 238, 0.35)\n        );\n        transform: translateX(var(--hf-rgb-x, 0px));\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"demo\"\n      data-composition-id=\"zoom-through-transition-demo\"\n      data-start=\"0\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n      data-duration=\"5\"\n    >\n      <div class=\"demo-frame\">\n        <div class=\"hf-catalog-zoom-through-transition\">\n          <div class=\"scene from\">Before</div>\n          <div class=\"scene to\">Zoom Through Transition</div>\n          <div class=\"fx\"></div>\n          <div class=\"rgb\"></div>\n        </div>\n      </div>\n      <script>\n        const tl = gsap.timeline({ paused: true });\n        const startTime = 0.5;\n        tl.fromTo(\n          \".hf-catalog-zoom-through-transition .to\",\n          { \"--hf-clip-right\": \"100%\", \"--hf-to-x\": \"60px\", \"--hf-to-scale\": 1.04 },\n          {\n            \"--hf-clip-right\": \"0%\",\n            \"--hf-to-x\": \"0px\",\n            \"--hf-to-scale\": 1,\n            duration: 0.9,\n            ease: \"power3.inOut\",\n          },\n          startTime,\n        );\n        tl.to(\n          \".hf-catalog-zoom-through-transition .from\",\n          {\n            \"--hf-from-x\": \"-70px\",\n            \"--hf-from-scale\": 0.96,\n            \"--hf-from-blur\": \"5px\",\n            duration: 0.9,\n            ease: \"power3.inOut\",\n          },\n          startTime,\n        );\n        tl.fromTo(\n          \".hf-catalog-zoom-through-transition .fx\",\n          { \"--hf-fx-x\": \"-110%\" },\n          { \"--hf-fx-x\": \"110%\", duration: 0.58, ease: \"power2.inOut\" },\n          startTime + 0.18,\n        );\n        tl.fromTo(\n          \".hf-catalog-zoom-through-transition .rgb\",\n          { \"--hf-rgb-opacity\": 0, \"--hf-rgb-x\": \"-16px\" },\n          {\n            \"--hf-rgb-opacity\": 1,\n            \"--hf-rgb-x\": \"16px\",\n            repeat: 3,\n            yoyo: true,\n            duration: 0.07,\n            ease: \"steps(1)\",\n          },\n          startTime + 0.32,\n        );\n        tl.set({}, {}, 5);\n        window.__timelines = window.__timelines || {};\n        window.__timelines[\"zoom-through-transition-demo\"] = tl;\n      </script>\n    </div>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/packages/cli/src/registry/__fixtures__/wordpiece-reference.json b/packages/cli/src/registry/__fixtures__/wordpiece-reference.json
index a4427f4f21..84703f24ef 100644
--- a/packages/cli/src/registry/__fixtures__/wordpiece-reference.json
+++ b/packages/cli/src/registry/__fixtures__/wordpiece-reference.json
@@ -78,63 +78,62 @@
   { "text": "\t\n\r control chars", "ids": [101, 2491, 25869, 2015, 102] },
   { "text": "accordion", "ids": [101, 19060, 102] },
   {
-    "text": "group: accordion, disclosure, remocn-port, ui-primitive\nwhat: Accordion. A precise disclosure row with a machined edge, accessible expansion state, and deterministic reveal hooks",
+    "text": "group: accordion, disclosure, ui-primitive\nwhat: Accordion. A precise disclosure row with a machined edge, accessible expansion state, and deterministic reveal hooks",
     "ids": [
-      101, 2177, 1024, 19060, 1010, 19380, 1010, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 21318,
-      1011, 10968, 2054, 1024, 19060, 1012, 1037, 10480, 19380, 5216, 2007, 1037, 3698, 2094, 3341,
-      1010, 7801, 4935, 2110, 1010, 1998, 28283, 25300, 10074, 7487, 18008, 102
+      101, 2177, 1024, 19060, 1010, 19380, 1010, 21318, 1011, 10968, 2054, 1024, 19060, 1012, 1037,
+      10480, 19380, 5216, 2007, 1037, 3698, 2094, 3341, 1010, 7801, 4935, 2110, 1010, 1998, 28283,
+      25300, 10074, 7487, 18008, 102
     ]
   },
   { "text": "ai-generation-canvas", "ids": [101, 9932, 1011, 4245, 1011, 10683, 102] },
   {
-    "text": "group: ai, remocn-port, showcase\nwhat: Generation Canvas. A prompt composer expands into a generated dashboard preview.",
+    "text": "group: ai, showcase\nwhat: Generation Canvas. A prompt composer expands into a generated dashboard preview.",
     "ids": [
-      101, 2177, 1024, 9932, 1010, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 13398, 2054, 1024,
-      4245, 10683, 1012, 1037, 25732, 4543, 24545, 2046, 1037, 7013, 24923, 19236, 1012, 102
+      101, 2177, 1024, 9932, 1010, 13398, 2054, 1024, 4245, 10683, 1012, 1037, 25732, 4543, 24545,
+      2046, 1037, 7013, 24923, 19236, 1012, 102
     ]
   },
   { "text": "ai-prompt-flow", "ids": [101, 9932, 1011, 25732, 1011, 4834, 102] },
   {
-    "text": "group: ai, prompt, remocn-port, ui-flow\nwhat: Prompt Flow. A composed prompt flow with prompt field, suggestion chips, generate action, and preview result card",
+    "text": "group: ai, prompt, ui-flow\nwhat: Prompt Flow. A composed prompt flow with prompt field, suggestion chips, generate action, and preview result card",
     "ids": [
-      101, 2177, 1024, 9932, 1010, 25732, 1010, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 21318,
-      1011, 4834, 2054, 1024, 25732, 4834, 1012, 1037, 3605, 25732, 4834, 2007, 25732, 2492, 1010,
-      10293, 11772, 1010, 9699, 2895, 1010, 1998, 19236, 2765, 4003, 102
+      101, 2177, 1024, 9932, 1010, 25732, 1010, 21318, 1011, 4834, 2054, 1024, 25732, 4834, 1012,
+      1037, 3605, 25732, 4834, 2007, 25732, 2492, 1010, 10293, 11772, 1010, 9699, 2895, 1010, 1998,
+      19236, 2765, 4003, 102
     ]
   },
   { "text": "alert", "ids": [101, 9499, 102] },
   {
-    "text": "group: alert, remocn-port, status, ui-primitive\nwhat: Alert. An Operator Black status alert with a matte surface, technical icon, title, and message",
+    "text": "group: alert, status, ui-primitive\nwhat: Alert. An Operator Black status alert with a matte surface, technical icon, title, and message",
     "ids": [
-      101, 2177, 1024, 9499, 1010, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 3570, 1010, 21318,
-      1011, 10968, 2054, 1024, 9499, 1012, 2019, 6872, 2304, 3570, 9499, 2007, 1037, 4717, 2063,
-      3302, 1010, 4087, 12696, 1010, 2516, 1010, 1998, 4471, 102
+      101, 2177, 1024, 9499, 1010, 3570, 1010, 21318, 1011, 10968, 2054, 1024, 9499, 1012, 2019,
+      6872, 2304, 3570, 9499, 2007, 1037, 4717, 2063, 3302, 1010, 4087, 12696, 1010, 2516, 1010,
+      1998, 4471, 102
     ]
   },
   { "text": "alert-dialog", "ids": [101, 9499, 1011, 13764, 8649, 102] },
   {
-    "text": "group: alert-dialog, overlay, remocn-port, ui-primitive\nwhat: Alert Dialog. An Operator Black destructive confirmation dialog with a flat backdrop and centered Soft Optical motion",
+    "text": "group: alert-dialog, overlay, ui-primitive\nwhat: Alert Dialog. An Operator Black destructive confirmation dialog with a flat backdrop and centered Soft Optical motion",
     "ids": [
-      101, 2177, 1024, 9499, 1011, 13764, 8649, 1010, 2058, 8485, 1010, 2128, 5302, 2278, 2078,
-      1011, 3417, 1010, 21318, 1011, 10968, 2054, 1024, 9499, 13764, 8649, 1012, 2019, 6872, 2304,
-      15615, 13964, 13764, 8649, 2007, 1037, 4257, 18876, 1998, 8857, 3730, 9380, 4367, 102
+      101, 2177, 1024, 9499, 1011, 13764, 8649, 1010, 2058, 8485, 1010, 21318, 1011, 10968, 2054,
+      1024, 9499, 13764, 8649, 1012, 2019, 6872, 2304, 15615, 13964, 13764, 8649, 2007, 1037, 4257,
+      18876, 1998, 8857, 3730, 9380, 4367, 102
     ]
   },
   { "text": "animated-bar-chart", "ids": [101, 6579, 1011, 3347, 1011, 3673, 102] },
   {
-    "text": "group: data, remocn-port\nwhat: Animated Bar Chart. A compact data card with deterministic bar growth and value callouts.",
+    "text": "group: data\nwhat: Animated Bar Chart. A compact data card with deterministic bar growth and value callouts.",
     "ids": [
-      101, 2177, 1024, 2951, 1010, 2128, 5302, 2278, 2078, 1011, 3417, 2054, 1024, 6579, 3347, 3673,
-      1012, 1037, 9233, 2951, 4003, 2007, 28283, 25300, 10074, 3347, 3930, 1998, 3643, 2655, 12166,
-      1012, 102
+      101, 2177, 1024, 2951, 2054, 1024, 6579, 3347, 3673, 1012, 1037, 9233, 2951, 4003, 2007,
+      28283, 25300, 10074, 3347, 3930, 1998, 3643, 2655, 12166, 1012, 102
     ]
   },
   { "text": "animated-line-chart", "ids": [101, 6579, 1011, 2240, 1011, 3673, 102] },
   {
-    "text": "group: data, remocn-port\nwhat: Animated Line Chart. A line chart draws across the card with endpoint emphasis.",
+    "text": "group: data\nwhat: Animated Line Chart. A line chart draws across the card with endpoint emphasis.",
     "ids": [
-      101, 2177, 1024, 2951, 1010, 2128, 5302, 2278, 2078, 1011, 3417, 2054, 1024, 6579, 2240, 3673,
-      1012, 1037, 2240, 3673, 9891, 2408, 1996, 4003, 2007, 2203, 8400, 7902, 1012, 102
+      101, 2177, 1024, 2951, 2054, 1024, 6579, 2240, 3673, 1012, 1037, 2240, 3673, 9891, 2408, 1996,
+      4003, 2007, 2203, 8400, 7902, 1012, 102
     ]
   },
   { "text": "app-showcase", "ids": [101, 10439, 1011, 13398, 102] },
@@ -190,11 +189,11 @@
   },
   { "text": "aspect-ratio", "ids": [101, 7814, 1011, 6463, 102] },
   {
-    "text": "group: aspect-ratio, layout, remocn-port, ui-primitive\nwhat: Aspect Ratio. A matte aspect-ratio frame for media and previews with a compact technical dimension label",
+    "text": "group: aspect-ratio, layout, ui-primitive\nwhat: Aspect Ratio. A matte aspect-ratio frame for media and previews with a compact technical dimension label",
     "ids": [
-      101, 2177, 1024, 7814, 1011, 6463, 1010, 9621, 1010, 2128, 5302, 2278, 2078, 1011, 3417, 1010,
-      21318, 1011, 10968, 2054, 1024, 7814, 6463, 1012, 1037, 4717, 2063, 7814, 1011, 6463, 4853,
-      2005, 2865, 1998, 19236, 2015, 2007, 1037, 9233, 4087, 9812, 3830, 102
+      101, 2177, 1024, 7814, 1011, 6463, 1010, 9621, 1010, 21318, 1011, 10968, 2054, 1024, 7814,
+      6463, 1012, 1037, 4717, 2063, 7814, 1011, 6463, 4853, 2005, 2865, 1998, 19236, 2015, 2007,
+      1037, 9233, 4087, 9812, 3830, 102
     ]
   },
   { "text": "aurora-drift", "ids": [101, 13158, 1011, 11852, 102] },
@@ -210,11 +209,11 @@
   },
   { "text": "avatar", "ids": [101, 22128, 102] },
   {
-    "text": "group: avatar, identity, remocn-port, ui-primitive\nwhat: Avatar. A matte initials avatar with a functional availability indicator and host-controlled sizing",
+    "text": "group: avatar, identity, ui-primitive\nwhat: Avatar. A matte initials avatar with a functional availability indicator and host-controlled sizing",
     "ids": [
-      101, 2177, 1024, 22128, 1010, 4767, 1010, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 21318,
-      1011, 10968, 2054, 1024, 22128, 1012, 1037, 4717, 2063, 20381, 22128, 2007, 1037, 8360, 11343,
-      17245, 1998, 3677, 1011, 4758, 9033, 6774, 102
+      101, 2177, 1024, 22128, 1010, 4767, 1010, 21318, 1011, 10968, 2054, 1024, 22128, 1012, 1037,
+      4717, 2063, 20381, 22128, 2007, 1037, 8360, 11343, 17245, 1998, 3677, 1011, 4758, 9033, 6774,
+      102
     ]
   },
   { "text": "avatar-cloud", "ids": [101, 22128, 1011, 6112, 102] },
@@ -238,20 +237,19 @@
   },
   { "text": "backdrop", "ids": [101, 18876, 102] },
   {
-    "text": "group: remocn-port, ui-primitive\nwhat: Backdrop. An Operator Black flat dimming backdrop for dialog, drawer, sheet, and modal scenes.",
+    "text": "group: ui-primitive\nwhat: Backdrop. An Operator Black flat dimming backdrop for dialog, drawer, sheet, and modal scenes.",
     "ids": [
-      101, 2177, 1024, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 21318, 1011, 10968, 2054, 1024,
-      18876, 1012, 2019, 6872, 2304, 4257, 11737, 6562, 18876, 2005, 13764, 8649, 1010, 13065, 1010,
-      7123, 1010, 1998, 16913, 2389, 5019, 1012, 102
+      101, 2177, 1024, 21318, 1011, 10968, 2054, 1024, 18876, 1012, 2019, 6872, 2304, 4257, 11737,
+      6562, 18876, 2005, 13764, 8649, 1010, 13065, 1010, 7123, 1010, 1998, 16913, 2389, 5019, 1012,
+      102
     ]
   },
   { "text": "badge", "ids": [101, 10780, 102] },
   {
-    "text": "group: badge, remocn-port, status, ui-primitive\nwhat: Badge. An Operator Black semantic badge for restrained success, warning, and neutral status labels",
+    "text": "group: badge, status, ui-primitive\nwhat: Badge. An Operator Black semantic badge for restrained success, warning, and neutral status labels",
     "ids": [
-      101, 2177, 1024, 10780, 1010, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 3570, 1010, 21318,
-      1011, 10968, 2054, 1024, 10780, 1012, 2019, 6872, 2304, 21641, 10780, 2005, 19868, 3112, 1010,
-      5432, 1010, 1998, 8699, 3570, 10873, 102
+      101, 2177, 1024, 10780, 1010, 3570, 1010, 21318, 1011, 10968, 2054, 1024, 10780, 1012, 2019,
+      6872, 2304, 21641, 10780, 2005, 19868, 3112, 1010, 5432, 1010, 1998, 8699, 3570, 10873, 102
     ]
   },
   { "text": "badge-pop", "ids": [101, 10780, 1011, 3769, 102] },
@@ -331,20 +329,20 @@
   },
   { "text": "blur-in", "ids": [101, 14819, 1011, 1999, 102] },
   {
-    "text": "group: blur-in, remocn-port, text-effect, ui-primitive\nwhat: Blur In. An Operator Black word-level content reveal that resolves its own text from controlled blur",
+    "text": "group: blur-in, text-effect, ui-primitive\nwhat: Blur In. An Operator Black word-level content reveal that resolves its own text from controlled blur",
     "ids": [
-      101, 2177, 1024, 14819, 1011, 1999, 1010, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 3793,
-      1011, 3466, 1010, 21318, 1011, 10968, 2054, 1024, 14819, 1999, 1012, 2019, 6872, 2304, 2773,
-      1011, 2504, 4180, 7487, 2008, 10663, 2015, 2049, 2219, 3793, 2013, 4758, 14819, 102
+      101, 2177, 1024, 14819, 1011, 1999, 1010, 3793, 1011, 3466, 1010, 21318, 1011, 10968, 2054,
+      1024, 14819, 1999, 1012, 2019, 6872, 2304, 2773, 1011, 2504, 4180, 7487, 2008, 10663, 2015,
+      2049, 2219, 3793, 2013, 4758, 14819, 102
     ]
   },
   { "text": "blur-out-up", "ids": [101, 14819, 1011, 2041, 1011, 2039, 102] },
   {
-    "text": "group: motion-primitive, remocn-port, typography\nwhat: Blur Out Up. Words arrive clean and depart upward with increasing blur for airy exits.",
+    "text": "group: motion-primitive, typography\nwhat: Blur Out Up. Words arrive clean and depart upward with increasing blur for airy exits.",
     "ids": [
-      101, 2177, 1024, 4367, 1011, 10968, 1010, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 5939,
-      6873, 12565, 2054, 1024, 14819, 2041, 2039, 1012, 2616, 7180, 4550, 1998, 18280, 10745, 2007,
-      4852, 14819, 2005, 2250, 2100, 16639, 1012, 102
+      101, 2177, 1024, 4367, 1011, 10968, 1010, 5939, 6873, 12565, 2054, 1024, 14819, 2041, 2039,
+      1012, 2616, 7180, 4550, 1998, 18280, 10745, 2007, 4852, 14819, 2005, 2250, 2100, 16639, 1012,
+      102
     ]
   },
   { "text": "bottom-up-letters", "ids": [101, 3953, 1011, 2039, 1011, 4144, 102] },
@@ -358,12 +356,11 @@
   },
   { "text": "breadcrumb", "ids": [101, 7852, 26775, 25438, 102] },
   {
-    "text": "group: breadcrumb, navigation, remocn-port, ui-primitive\nwhat: Breadcrumb. A quiet path-navigation primitive with technical SVG separators and a strong current-page treatment",
+    "text": "group: breadcrumb, navigation, ui-primitive\nwhat: Breadcrumb. A quiet path-navigation primitive with technical SVG separators and a strong current-page treatment",
     "ids": [
-      101, 2177, 1024, 7852, 26775, 25438, 1010, 9163, 1010, 2128, 5302, 2278, 2078, 1011, 3417,
-      1010, 21318, 1011, 10968, 2054, 1024, 7852, 26775, 25438, 1012, 1037, 4251, 4130, 1011, 9163,
-      10968, 2007, 4087, 17917, 2290, 19802, 25879, 5668, 1998, 1037, 2844, 2783, 1011, 3931, 3949,
-      102
+      101, 2177, 1024, 7852, 26775, 25438, 1010, 9163, 1010, 21318, 1011, 10968, 2054, 1024, 7852,
+      26775, 25438, 1012, 1037, 4251, 4130, 1011, 9163, 10968, 2007, 4087, 17917, 2290, 19802,
+      25879, 5668, 1998, 1037, 2844, 2783, 1011, 3931, 3949, 102
     ]
   },
   { "text": "browser-device-stage", "ids": [101, 16602, 1011, 5080, 1011, 2754, 102] },
@@ -381,37 +378,35 @@
   },
   { "text": "browser-flow", "ids": [101, 16602, 1011, 4834, 102] },
   {
-    "text": "group: remocn-port, showcase\nwhat: Browser Flow. A browser frame walks through a three-step product flow.",
+    "text": "group: showcase\nwhat: Browser Flow. A browser frame walks through a three-step product flow.",
     "ids": [
-      101, 2177, 1024, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 13398, 2054, 1024, 16602, 4834,
-      1012, 1037, 16602, 4853, 7365, 2083, 1037, 2093, 1011, 3357, 4031, 4834, 1012, 102
+      101, 2177, 1024, 13398, 2054, 1024, 16602, 4834, 1012, 1037, 16602, 4853, 7365, 2083, 1037,
+      2093, 1011, 3357, 4031, 4834, 1012, 102
     ]
   },
   { "text": "button", "ids": [101, 6462, 102] },
   {
-    "text": "group: button, control, remocn-port, ui-primitive\nwhat: Button. A video-safe action button with tactile press, loading, and success states",
+    "text": "group: button, control, ui-primitive\nwhat: Button. A video-safe action button with tactile press, loading, and success states",
     "ids": [
-      101, 2177, 1024, 6462, 1010, 2491, 1010, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 21318,
-      1011, 10968, 2054, 1024, 6462, 1012, 1037, 2678, 1011, 3647, 2895, 6462, 2007, 11937, 6593,
-      9463, 2811, 1010, 10578, 1010, 1998, 3112, 2163, 102
+      101, 2177, 1024, 6462, 1010, 2491, 1010, 21318, 1011, 10968, 2054, 1024, 6462, 1012, 1037,
+      2678, 1011, 3647, 2895, 6462, 2007, 11937, 6593, 9463, 2811, 1010, 10578, 1010, 1998, 3112,
+      2163, 102
     ]
   },
   { "text": "button-group", "ids": [101, 6462, 1011, 2177, 102] },
   {
-    "text": "group: button-group, control, remocn-port, ui-primitive\nwhat: Button Group. A compact segmented action group with clear pressed-state emphasis",
+    "text": "group: button-group, control, ui-primitive\nwhat: Button Group. A compact segmented action group with clear pressed-state emphasis",
     "ids": [
-      101, 2177, 1024, 6462, 1011, 2177, 1010, 2491, 1010, 2128, 5302, 2278, 2078, 1011, 3417, 1010,
-      21318, 1011, 10968, 2054, 1024, 6462, 2177, 1012, 1037, 9233, 6903, 2098, 2895, 2177, 2007,
-      3154, 4508, 1011, 2110, 7902, 102
+      101, 2177, 1024, 6462, 1011, 2177, 1010, 2491, 1010, 21318, 1011, 10968, 2054, 1024, 6462,
+      2177, 1012, 1037, 9233, 6903, 2098, 2895, 2177, 2007, 3154, 4508, 1011, 2110, 7902, 102
     ]
   },
   { "text": "calendar", "ids": [101, 8094, 102] },
   {
-    "text": "group: calendar, date, remocn-port, ui-primitive\nwhat: Calendar. A compact date grid with a recessed selected day and deterministic reveal",
+    "text": "group: calendar, date, ui-primitive\nwhat: Calendar. A compact date grid with a recessed selected day and deterministic reveal",
     "ids": [
-      101, 2177, 1024, 8094, 1010, 3058, 1010, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 21318,
-      1011, 10968, 2054, 1024, 8094, 1012, 1037, 9233, 3058, 8370, 2007, 1037, 28290, 2098, 3479,
-      2154, 1998, 28283, 25300, 10074, 7487, 102
+      101, 2177, 1024, 8094, 1010, 3058, 1010, 21318, 1011, 10968, 2054, 1024, 8094, 1012, 1037,
+      9233, 3058, 8370, 2007, 1037, 28290, 2098, 3479, 2154, 1998, 28283, 25300, 10074, 7487, 102
     ]
   },
   {
@@ -625,11 +620,11 @@
   },
   { "text": "card", "ids": [101, 4003, 102] },
   {
-    "text": "group: card, remocn-port, surface, ui-primitive\nwhat: Card. A single semantic card surface with calm type hierarchy, success status, a review action, and Soft Optical reveal hooks",
+    "text": "group: card, surface, ui-primitive\nwhat: Card. A single semantic card surface with calm type hierarchy, success status, a review action, and Soft Optical reveal hooks",
     "ids": [
-      101, 2177, 1024, 4003, 1010, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 3302, 1010, 21318,
-      1011, 10968, 2054, 1024, 4003, 1012, 1037, 2309, 21641, 4003, 3302, 2007, 5475, 2828, 12571,
-      1010, 3112, 3570, 1010, 1037, 3319, 2895, 1010, 1998, 3730, 9380, 7487, 18008, 102
+      101, 2177, 1024, 4003, 1010, 3302, 1010, 21318, 1011, 10968, 2054, 1024, 4003, 1012, 1037,
+      2309, 21641, 4003, 3302, 2007, 5475, 2828, 12571, 1010, 3112, 3570, 1010, 1037, 3319, 2895,
+      1010, 1998, 3730, 9380, 7487, 18008, 102
     ]
   },
   { "text": "card-resize", "ids": [101, 4003, 1011, 24501, 4697, 102] },
@@ -643,20 +638,20 @@
   },
   { "text": "caret", "ids": [101, 2729, 2102, 102] },
   {
-    "text": "group: caret, remocn-port, typing, ui-primitive\nwhat: Caret. A matte command-field caret with finite blink timing and a deterministic typed-value reveal",
+    "text": "group: caret, typing, ui-primitive\nwhat: Caret. A matte command-field caret with finite blink timing and a deterministic typed-value reveal",
     "ids": [
-      101, 2177, 1024, 2729, 2102, 1010, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 22868, 1010,
-      21318, 1011, 10968, 2054, 1024, 2729, 2102, 1012, 1037, 4717, 2063, 3094, 1011, 2492, 2729,
-      2102, 2007, 10713, 12373, 10984, 1998, 1037, 28283, 25300, 10074, 21189, 1011, 3643, 7487, 102
+      101, 2177, 1024, 2729, 2102, 1010, 22868, 1010, 21318, 1011, 10968, 2054, 1024, 2729, 2102,
+      1012, 1037, 4717, 2063, 3094, 1011, 2492, 2729, 2102, 2007, 10713, 12373, 10984, 1998, 1037,
+      28283, 25300, 10074, 21189, 1011, 3643, 7487, 102
     ]
   },
   { "text": "carousel", "ids": [101, 27628, 102] },
   {
-    "text": "group: carousel, media, remocn-port, ui-primitive\nwhat: Carousel. A restrained scene carousel with layered media surfaces, accessible position controls, and deterministic slide motion",
+    "text": "group: carousel, media, ui-primitive\nwhat: Carousel. A restrained scene carousel with layered media surfaces, accessible position controls, and deterministic slide motion",
     "ids": [
-      101, 2177, 1024, 27628, 1010, 2865, 1010, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 21318,
-      1011, 10968, 2054, 1024, 27628, 1012, 1037, 19868, 3496, 27628, 2007, 21323, 2865, 9972, 1010,
-      7801, 2597, 7711, 1010, 1998, 28283, 25300, 10074, 7358, 4367, 102
+      101, 2177, 1024, 27628, 1010, 2865, 1010, 21318, 1011, 10968, 2054, 1024, 27628, 1012, 1037,
+      19868, 3496, 27628, 2007, 21323, 2865, 9972, 1010, 7801, 2597, 7711, 1010, 1998, 28283, 25300,
+      10074, 7358, 4367, 102
     ]
   },
   { "text": "char-slam-explode", "ids": [101, 25869, 1011, 9555, 1011, 15044, 102] },
@@ -672,11 +667,11 @@
   },
   { "text": "chart", "ids": [101, 3673, 102] },
   {
-    "text": "group: chart, data, remocn-port, ui-primitive\nwhat: Chart. An Operator Black categorical bar chart using the shared solid data palette and deterministic growth",
+    "text": "group: chart, data, ui-primitive\nwhat: Chart. An Operator Black categorical bar chart using the shared solid data palette and deterministic growth",
     "ids": [
-      101, 2177, 1024, 3673, 1010, 2951, 1010, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 21318,
-      1011, 10968, 2054, 1024, 3673, 1012, 2019, 6872, 2304, 4937, 27203, 3347, 3673, 2478, 1996,
-      4207, 5024, 2951, 27396, 1998, 28283, 25300, 10074, 3930, 102
+      101, 2177, 1024, 3673, 1010, 2951, 1010, 21318, 1011, 10968, 2054, 1024, 3673, 1012, 2019,
+      6872, 2304, 4937, 27203, 3347, 3673, 2478, 1996, 4207, 5024, 2951, 27396, 1998, 28283, 25300,
+      10074, 3930, 102
     ]
   },
   { "text": "chart-story", "ids": [101, 3673, 1011, 2466, 102] },
@@ -697,29 +692,28 @@
     "ids": [101, 11834, 1011, 2000, 1011, 19236, 1011, 9621, 102]
   },
   {
-    "text": "group: ai, remocn-port, showcase\nwhat: Chat to Preview Layout. Split-pane chat and preview layout for agent-generated UI.",
+    "text": "group: ai, showcase\nwhat: Chat to Preview Layout. Split-pane chat and preview layout for agent-generated UI.",
     "ids": [
-      101, 2177, 1024, 9932, 1010, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 13398, 2054, 1024,
-      11834, 2000, 19236, 9621, 1012, 3975, 1011, 6090, 2063, 11834, 1998, 19236, 9621, 2005, 4005,
-      1011, 7013, 21318, 1012, 102
+      101, 2177, 1024, 9932, 1010, 13398, 2054, 1024, 11834, 2000, 19236, 9621, 1012, 3975, 1011,
+      6090, 2063, 11834, 1998, 19236, 9621, 2005, 4005, 1011, 7013, 21318, 1012, 102
     ]
   },
   { "text": "checkbox", "ids": [101, 4638, 8758, 102] },
   {
-    "text": "group: checkbox, control, remocn-port, ui-primitive\nwhat: Checkbox. An accessible checkbox with tactile feedback and a functional mint check state",
+    "text": "group: checkbox, control, ui-primitive\nwhat: Checkbox. An accessible checkbox with tactile feedback and a functional mint check state",
     "ids": [
-      101, 2177, 1024, 4638, 8758, 1010, 2491, 1010, 2128, 5302, 2278, 2078, 1011, 3417, 1010,
-      21318, 1011, 10968, 2054, 1024, 4638, 8758, 1012, 2019, 7801, 4638, 8758, 2007, 11937, 6593,
-      9463, 12247, 1998, 1037, 8360, 12927, 4638, 2110, 102
+      101, 2177, 1024, 4638, 8758, 1010, 2491, 1010, 21318, 1011, 10968, 2054, 1024, 4638, 8758,
+      1012, 2019, 7801, 4638, 8758, 2007, 11937, 6593, 9463, 12247, 1998, 1037, 8360, 12927, 4638,
+      2110, 102
     ]
   },
   { "text": "checkout-flow", "ids": [101, 4638, 5833, 1011, 4834, 102] },
   {
-    "text": "group: checkout, commerce, remocn-port, ui-flow\nwhat: Checkout Flow. A composed checkout flow with plan summary, payment field rows, total, and purchase action",
+    "text": "group: checkout, commerce, ui-flow\nwhat: Checkout Flow. A composed checkout flow with plan summary, payment field rows, total, and purchase action",
     "ids": [
-      101, 2177, 1024, 4638, 5833, 1010, 6236, 1010, 2128, 5302, 2278, 2078, 1011, 3417, 1010,
-      21318, 1011, 4834, 2054, 1024, 4638, 5833, 4834, 1012, 1037, 3605, 4638, 5833, 4834, 2007,
-      2933, 12654, 1010, 7909, 2492, 10281, 1010, 2561, 1010, 1998, 5309, 2895, 102
+      101, 2177, 1024, 4638, 5833, 1010, 6236, 1010, 21318, 1011, 4834, 2054, 1024, 4638, 5833,
+      4834, 1012, 1037, 3605, 4638, 5833, 4834, 2007, 2933, 12654, 1010, 7909, 2492, 10281, 1010,
+      2561, 1010, 1998, 5309, 2895, 102
     ]
   },
   {
@@ -742,11 +736,10 @@
     "ids": [101, 10381, 23645, 1011, 14863, 11335, 3508, 1011, 13387, 102]
   },
   {
-    "text": "group: remocn-port, transition-primitive\nwhat: Chromatic Aberration Wipe. A fast slide wipe with RGB channel split on peak frames.",
+    "text": "group: transition-primitive\nwhat: Chromatic Aberration Wipe. A fast slide wipe with RGB channel split on peak frames.",
     "ids": [
-      101, 2177, 1024, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 6653, 1011, 10968, 2054, 1024,
-      10381, 23645, 14863, 11335, 3508, 13387, 1012, 1037, 3435, 7358, 13387, 2007, 1054, 18259,
-      3149, 3975, 2006, 4672, 11048, 1012, 102
+      101, 2177, 1024, 6653, 1011, 10968, 2054, 1024, 10381, 23645, 14863, 11335, 3508, 13387, 1012,
+      1037, 3435, 7358, 13387, 2007, 1054, 18259, 3149, 3975, 2006, 4672, 11048, 1012, 102
     ]
   },
   { "text": "chromatic-radial-split", "ids": [101, 10381, 23645, 1011, 15255, 1011, 3975, 102] },
@@ -778,10 +771,10 @@
   },
   { "text": "code-accordion", "ids": [101, 3642, 1011, 19060, 102] },
   {
-    "text": "group: code-animation, remocn-port\nwhat: Code Accordion. Stacked code sections expand one at a time with line highlights.",
+    "text": "group: code-animation\nwhat: Code Accordion. Stacked code sections expand one at a time with line highlights.",
     "ids": [
-      101, 2177, 1024, 3642, 1011, 7284, 1010, 2128, 5302, 2278, 2078, 1011, 3417, 2054, 1024, 3642,
-      19060, 1012, 16934, 3642, 5433, 7818, 2028, 2012, 1037, 2051, 2007, 2240, 11637, 1012, 102
+      101, 2177, 1024, 3642, 1011, 7284, 2054, 1024, 3642, 19060, 1012, 16934, 3642, 5433, 7818,
+      2028, 2012, 1037, 2051, 2007, 2240, 11637, 1012, 102
     ]
   },
   { "text": "code-diff", "ids": [101, 3642, 1011, 4487, 4246, 102] },
@@ -795,11 +788,10 @@
   },
   { "text": "code-diff-wipe", "ids": [101, 3642, 1011, 4487, 4246, 1011, 13387, 102] },
   {
-    "text": "group: remocn-port, transition-primitive\nwhat: Code Diff Wipe. A scene transition that wipes through added and removed code lines.",
+    "text": "group: transition-primitive\nwhat: Code Diff Wipe. A scene transition that wipes through added and removed code lines.",
     "ids": [
-      101, 2177, 1024, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 6653, 1011, 10968, 2054, 1024,
-      3642, 4487, 4246, 13387, 1012, 1037, 3496, 6653, 2008, 13387, 2015, 2083, 2794, 1998, 3718,
-      3642, 3210, 1012, 102
+      101, 2177, 1024, 6653, 1011, 10968, 2054, 1024, 3642, 4487, 4246, 13387, 1012, 1037, 3496,
+      6653, 2008, 13387, 2015, 2083, 2794, 1998, 3718, 3642, 3210, 1012, 102
     ]
   },
   { "text": "code-highlight", "ids": [101, 3642, 1011, 12944, 102] },
@@ -1203,39 +1195,37 @@
   },
   { "text": "collapsible", "ids": [101, 8902, 2721, 4523, 7028, 102] },
   {
-    "text": "group: collapsible, disclosure, remocn-port, ui-primitive\nwhat: Collapsible. A compact disclosure surface with an accessible trigger, restrained chevron motion, and deterministic height reveal",
+    "text": "group: collapsible, disclosure, ui-primitive\nwhat: Collapsible. A compact disclosure surface with an accessible trigger, restrained chevron motion, and deterministic height reveal",
     "ids": [
-      101, 2177, 1024, 8902, 2721, 4523, 7028, 1010, 19380, 1010, 2128, 5302, 2278, 2078, 1011,
-      3417, 1010, 21318, 1011, 10968, 2054, 1024, 8902, 2721, 4523, 7028, 1012, 1037, 9233, 19380,
-      3302, 2007, 2019, 7801, 9495, 1010, 19868, 18178, 28588, 4367, 1010, 1998, 28283, 25300,
-      10074, 4578, 7487, 102
+      101, 2177, 1024, 8902, 2721, 4523, 7028, 1010, 19380, 1010, 21318, 1011, 10968, 2054, 1024,
+      8902, 2721, 4523, 7028, 1012, 1037, 9233, 19380, 3302, 2007, 2019, 7801, 9495, 1010, 19868,
+      18178, 28588, 4367, 1010, 1998, 28283, 25300, 10074, 4578, 7487, 102
     ]
   },
   { "text": "combobox", "ids": [101, 25025, 8758, 102] },
   {
-    "text": "group: combobox, control, remocn-port, ui-primitive\nwhat: Combobox. A searchable combobox with an anchored option list and explicit selection check",
+    "text": "group: combobox, control, ui-primitive\nwhat: Combobox. A searchable combobox with an anchored option list and explicit selection check",
     "ids": [
-      101, 2177, 1024, 25025, 8758, 1010, 2491, 1010, 2128, 5302, 2278, 2078, 1011, 3417, 1010,
-      21318, 1011, 10968, 2054, 1024, 25025, 8758, 1012, 1037, 3945, 3085, 25025, 8758, 2007, 2019,
-      14453, 5724, 2862, 1998, 13216, 4989, 4638, 102
+      101, 2177, 1024, 25025, 8758, 1010, 2491, 1010, 21318, 1011, 10968, 2054, 1024, 25025, 8758,
+      1012, 1037, 3945, 3085, 25025, 8758, 2007, 2019, 14453, 5724, 2862, 1998, 13216, 4989, 4638,
+      102
     ]
   },
   { "text": "command-menu", "ids": [101, 3094, 1011, 12183, 102] },
   {
-    "text": "group: command-menu, overlay, remocn-port, ui-primitive\nwhat: Command Menu. An Operator Black command palette with a recessed search field and mint selection check",
+    "text": "group: command-menu, overlay, ui-primitive\nwhat: Command Menu. An Operator Black command palette with a recessed search field and mint selection check",
     "ids": [
-      101, 2177, 1024, 3094, 1011, 12183, 1010, 2058, 8485, 1010, 2128, 5302, 2278, 2078, 1011,
-      3417, 1010, 21318, 1011, 10968, 2054, 1024, 3094, 12183, 1012, 2019, 6872, 2304, 3094, 27396,
-      2007, 1037, 28290, 2098, 3945, 2492, 1998, 12927, 4989, 4638, 102
+      101, 2177, 1024, 3094, 1011, 12183, 1010, 2058, 8485, 1010, 21318, 1011, 10968, 2054, 1024,
+      3094, 12183, 1012, 2019, 6872, 2304, 3094, 27396, 2007, 1037, 28290, 2098, 3945, 2492, 1998,
+      12927, 4989, 4638, 102
     ]
   },
   { "text": "command-menu-item", "ids": [101, 3094, 1011, 12183, 1011, 8875, 102] },
   {
-    "text": "group: remocn-port, ui-primitive\nwhat: Command Menu Item. An Operator Black command-row specimen with technical shortcuts and restrained selection state.",
+    "text": "group: ui-primitive\nwhat: Command Menu Item. An Operator Black command-row specimen with technical shortcuts and restrained selection state.",
     "ids": [
-      101, 2177, 1024, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 21318, 1011, 10968, 2054, 1024,
-      3094, 12183, 8875, 1012, 2019, 6872, 2304, 3094, 1011, 5216, 11375, 2007, 4087, 2460, 12690,
-      2015, 1998, 19868, 4989, 2110, 1012, 102
+      101, 2177, 1024, 21318, 1011, 10968, 2054, 1024, 3094, 12183, 8875, 1012, 2019, 6872, 2304,
+      3094, 1011, 5216, 11375, 2007, 4087, 2460, 12690, 2015, 1998, 19868, 4989, 2110, 1012, 102
     ]
   },
   { "text": "comparison-split", "ids": [101, 7831, 1011, 3975, 102] },
@@ -1251,10 +1241,10 @@
   },
   { "text": "confetti", "ids": [101, 9530, 7959, 6916, 102] },
   {
-    "text": "group: effect, remocn-port\nwhat: Confetti. A deterministic celebration burst with seeded particles and gravity.",
+    "text": "group: effect\nwhat: Confetti. A deterministic celebration burst with seeded particles and gravity.",
     "ids": [
-      101, 2177, 1024, 3466, 1010, 2128, 5302, 2278, 2078, 1011, 3417, 2054, 1024, 9530, 7959, 6916,
-      1012, 1037, 28283, 25300, 10074, 7401, 6532, 2007, 13916, 9309, 1998, 8992, 1012, 102
+      101, 2177, 1024, 3466, 2054, 1024, 9530, 7959, 6916, 1012, 1037, 28283, 25300, 10074, 7401,
+      6532, 2007, 13916, 9309, 1998, 8992, 1012, 102
     ]
   },
   { "text": "conic-progress-ring", "ids": [101, 9530, 2594, 1011, 5082, 1011, 3614, 102] },
@@ -1280,11 +1270,11 @@
   },
   { "text": "context-menu", "ids": [101, 6123, 1011, 12183, 102] },
   {
-    "text": "group: context-menu, menu, remocn-port, ui-primitive\nwhat: Context Menu. An Operator Black context menu with a pointer anchor, technical shortcuts, and mint selection check",
+    "text": "group: context-menu, menu, ui-primitive\nwhat: Context Menu. An Operator Black context menu with a pointer anchor, technical shortcuts, and mint selection check",
     "ids": [
-      101, 2177, 1024, 6123, 1011, 12183, 1010, 12183, 1010, 2128, 5302, 2278, 2078, 1011, 3417,
-      1010, 21318, 1011, 10968, 2054, 1024, 6123, 12183, 1012, 2019, 6872, 2304, 6123, 12183, 2007,
-      1037, 20884, 8133, 1010, 4087, 2460, 12690, 2015, 1010, 1998, 12927, 4989, 4638, 102
+      101, 2177, 1024, 6123, 1011, 12183, 1010, 12183, 1010, 21318, 1011, 10968, 2054, 1024, 6123,
+      12183, 1012, 2019, 6872, 2304, 6123, 12183, 2007, 1037, 20884, 8133, 1010, 4087, 2460, 12690,
+      2015, 1010, 1998, 12927, 4989, 4638, 102
     ]
   },
   { "text": "count-up", "ids": [101, 4175, 1011, 2039, 102] },
@@ -1330,12 +1320,11 @@
   },
   { "text": "cursor", "ids": [101, 12731, 25301, 2099, 102] },
   {
-    "text": "group: cursor, pointer, remocn-port, ui-primitive\nwhat: Cursor. A technical SVG pointer with guided travel, a functional click ripple, and a compact action callout",
+    "text": "group: cursor, pointer, ui-primitive\nwhat: Cursor. A technical SVG pointer with guided travel, a functional click ripple, and a compact action callout",
     "ids": [
-      101, 2177, 1024, 12731, 25301, 2099, 1010, 20884, 1010, 2128, 5302, 2278, 2078, 1011, 3417,
-      1010, 21318, 1011, 10968, 2054, 1024, 12731, 25301, 2099, 1012, 1037, 4087, 17917, 2290,
-      20884, 2007, 8546, 3604, 1010, 1037, 8360, 11562, 24644, 1010, 1998, 1037, 9233, 2895, 2655,
-      5833, 102
+      101, 2177, 1024, 12731, 25301, 2099, 1010, 20884, 1010, 21318, 1011, 10968, 2054, 1024, 12731,
+      25301, 2099, 1012, 1037, 4087, 17917, 2290, 20884, 2007, 8546, 3604, 1010, 1037, 8360, 11562,
+      24644, 1010, 1998, 1037, 9233, 2895, 2655, 5833, 102
     ]
   },
   {
@@ -1367,10 +1356,10 @@
   },
   { "text": "dashboard-populate", "ids": [101, 24923, 1011, 3769, 9869, 102] },
   {
-    "text": "group: data, remocn-port\nwhat: Dashboard Populate. Skeleton dashboard cards resolve into populated charts and metrics.",
+    "text": "group: data\nwhat: Dashboard Populate. Skeleton dashboard cards resolve into populated charts and metrics.",
     "ids": [
-      101, 2177, 1024, 2951, 1010, 2128, 5302, 2278, 2078, 1011, 3417, 2054, 1024, 24923, 3769,
-      9869, 1012, 13526, 24923, 5329, 10663, 2046, 10357, 6093, 1998, 12046, 2015, 1012, 102
+      101, 2177, 1024, 2951, 2054, 1024, 24923, 3769, 9869, 1012, 13526, 24923, 5329, 10663, 2046,
+      10357, 6093, 1998, 12046, 2015, 1012, 102
     ]
   },
   { "text": "data-chart", "ids": [101, 2951, 1011, 3673, 102] },
@@ -1384,10 +1373,10 @@
   },
   { "text": "data-flow-pipes", "ids": [101, 2951, 1011, 4834, 1011, 12432, 102] },
   {
-    "text": "group: remocn-port, showcase\nwhat: Data Flow Pipes. Animated pipe routes move packets between data nodes.",
+    "text": "group: showcase\nwhat: Data Flow Pipes. Animated pipe routes move packets between data nodes.",
     "ids": [
-      101, 2177, 1024, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 13398, 2054, 1024, 2951, 4834,
-      12432, 1012, 6579, 8667, 5847, 2693, 23730, 2090, 2951, 14164, 1012, 102
+      101, 2177, 1024, 13398, 2054, 1024, 2951, 4834, 12432, 1012, 6579, 8667, 5847, 2693, 23730,
+      2090, 2951, 14164, 1012, 102
     ]
   },
   { "text": "decline-chart", "ids": [101, 6689, 1011, 3673, 102] },
@@ -1425,28 +1414,27 @@
   },
   { "text": "device-mockup-zoom", "ids": [101, 5080, 1011, 12934, 6279, 1011, 24095, 102] },
   {
-    "text": "group: remocn-port, showcase\nwhat: Device Mockup Zoom. A device frame scales forward while UI panels parallax behind it.",
+    "text": "group: showcase\nwhat: Device Mockup Zoom. A device frame scales forward while UI panels parallax behind it.",
     "ids": [
-      101, 2177, 1024, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 13398, 2054, 1024, 5080, 12934,
-      6279, 24095, 1012, 1037, 5080, 4853, 9539, 2830, 2096, 21318, 9320, 11498, 4571, 2595, 2369,
-      2009, 1012, 102
+      101, 2177, 1024, 13398, 2054, 1024, 5080, 12934, 6279, 24095, 1012, 1037, 5080, 4853, 9539,
+      2830, 2096, 21318, 9320, 11498, 4571, 2595, 2369, 2009, 1012, 102
     ]
   },
   { "text": "dialog", "ids": [101, 13764, 8649, 102] },
   {
-    "text": "group: dialog, overlay, remocn-port, ui-primitive\nwhat: Dialog. An Operator Black centered modal with a flat backdrop, restrained actions, and Soft Optical motion",
+    "text": "group: dialog, overlay, ui-primitive\nwhat: Dialog. An Operator Black centered modal with a flat backdrop, restrained actions, and Soft Optical motion",
     "ids": [
-      101, 2177, 1024, 13764, 8649, 1010, 2058, 8485, 1010, 2128, 5302, 2278, 2078, 1011, 3417,
-      1010, 21318, 1011, 10968, 2054, 1024, 13764, 8649, 1012, 2019, 6872, 2304, 8857, 16913, 2389,
-      2007, 1037, 4257, 18876, 1010, 19868, 4506, 1010, 1998, 3730, 9380, 4367, 102
+      101, 2177, 1024, 13764, 8649, 1010, 2058, 8485, 1010, 21318, 1011, 10968, 2054, 1024, 13764,
+      8649, 1012, 2019, 6872, 2304, 8857, 16913, 2389, 2007, 1037, 4257, 18876, 1010, 19868, 4506,
+      1010, 1998, 3730, 9380, 4367, 102
     ]
   },
   { "text": "directional-wipe", "ids": [101, 20396, 1011, 13387, 102] },
   {
-    "text": "group: remocn-port, transition-primitive\nwhat: Directional Wipe. A directional scene push that slides one panel over another.",
+    "text": "group: transition-primitive\nwhat: Directional Wipe. A directional scene push that slides one panel over another.",
     "ids": [
-      101, 2177, 1024, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 6653, 1011, 10968, 2054, 1024,
-      20396, 13387, 1012, 1037, 20396, 3496, 5245, 2008, 14816, 2028, 5997, 2058, 2178, 1012, 102
+      101, 2177, 1024, 6653, 1011, 10968, 2054, 1024, 20396, 13387, 1012, 1037, 20396, 3496, 5245,
+      2008, 14816, 2028, 5997, 2058, 2178, 1012, 102
     ]
   },
   { "text": "domain-warp-dissolve", "ids": [101, 5884, 1011, 24136, 1011, 21969, 102] },
@@ -1459,19 +1447,19 @@
   },
   { "text": "drag-and-drop-flow", "ids": [101, 8011, 1011, 1998, 1011, 4530, 1011, 4834, 102] },
   {
-    "text": "group: remocn-port, showcase\nwhat: Drag and Drop Flow. Cards drag from backlog to timeline with snap feedback.",
+    "text": "group: showcase\nwhat: Drag and Drop Flow. Cards drag from backlog to timeline with snap feedback.",
     "ids": [
-      101, 2177, 1024, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 13398, 2054, 1024, 8011, 1998,
-      4530, 4834, 1012, 5329, 8011, 2013, 2067, 21197, 2000, 17060, 2007, 10245, 12247, 1012, 102
+      101, 2177, 1024, 13398, 2054, 1024, 8011, 1998, 4530, 4834, 1012, 5329, 8011, 2013, 2067,
+      21197, 2000, 17060, 2007, 10245, 12247, 1012, 102
     ]
   },
   { "text": "drawer", "ids": [101, 13065, 102] },
   {
-    "text": "group: drawer, overlay, remocn-port, ui-primitive\nwhat: Drawer. An Operator Black bottom drawer with matte rows and edge-attached Soft Optical motion",
+    "text": "group: drawer, overlay, ui-primitive\nwhat: Drawer. An Operator Black bottom drawer with matte rows and edge-attached Soft Optical motion",
     "ids": [
-      101, 2177, 1024, 13065, 1010, 2058, 8485, 1010, 2128, 5302, 2278, 2078, 1011, 3417, 1010,
-      21318, 1011, 10968, 2054, 1024, 13065, 1012, 2019, 6872, 2304, 3953, 13065, 2007, 4717, 2063,
-      10281, 1998, 3341, 1011, 4987, 3730, 9380, 4367, 102
+      101, 2177, 1024, 13065, 1010, 2058, 8485, 1010, 21318, 1011, 10968, 2054, 1024, 13065, 1012,
+      2019, 6872, 2304, 3953, 13065, 2007, 4717, 2063, 10281, 1998, 3341, 1011, 4987, 3730, 9380,
+      4367, 102
     ]
   },
   { "text": "drift-hold", "ids": [101, 11852, 1011, 2907, 102] },
@@ -1486,20 +1474,20 @@
   },
   { "text": "dropdown-menu", "ids": [101, 4530, 7698, 1011, 12183, 102] },
   {
-    "text": "group: dropdown-menu, menu, remocn-port, ui-primitive\nwhat: Dropdown Menu. An Operator Black dropdown menu with origin-aware motion and a mint selection check",
+    "text": "group: dropdown-menu, menu, ui-primitive\nwhat: Dropdown Menu. An Operator Black dropdown menu with origin-aware motion and a mint selection check",
     "ids": [
-      101, 2177, 1024, 4530, 7698, 1011, 12183, 1010, 12183, 1010, 2128, 5302, 2278, 2078, 1011,
-      3417, 1010, 21318, 1011, 10968, 2054, 1024, 4530, 7698, 12183, 1012, 2019, 6872, 2304, 4530,
-      7698, 12183, 2007, 4761, 1011, 5204, 4367, 1998, 1037, 12927, 4989, 4638, 102
+      101, 2177, 1024, 4530, 7698, 1011, 12183, 1010, 12183, 1010, 21318, 1011, 10968, 2054, 1024,
+      4530, 7698, 12183, 1012, 2019, 6872, 2304, 4530, 7698, 12183, 2007, 4761, 1011, 5204, 4367,
+      1998, 1037, 12927, 4989, 4638, 102
     ]
   },
   { "text": "dropdown-menu-item", "ids": [101, 4530, 7698, 1011, 12183, 1011, 8875, 102] },
   {
-    "text": "group: remocn-port, ui-primitive\nwhat: Dropdown Menu Item. An Operator Black menu-row specimen showing idle, hover, selected, and disabled treatments.",
+    "text": "group: ui-primitive\nwhat: Dropdown Menu Item. An Operator Black menu-row specimen showing idle, hover, selected, and disabled treatments.",
     "ids": [
-      101, 2177, 1024, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 21318, 1011, 10968, 2054, 1024,
-      4530, 7698, 12183, 8875, 1012, 2019, 6872, 2304, 12183, 1011, 5216, 11375, 4760, 18373, 1010,
-      25215, 2099, 1010, 3479, 1010, 1998, 9776, 13441, 1012, 102
+      101, 2177, 1024, 21318, 1011, 10968, 2054, 1024, 4530, 7698, 12183, 8875, 1012, 2019, 6872,
+      2304, 12183, 1011, 5216, 11375, 4760, 18373, 1010, 25215, 2099, 1010, 3479, 1010, 1998, 9776,
+      13441, 1012, 102
     ]
   },
   { "text": "dynamic-grid", "ids": [101, 8790, 1011, 8370, 102] },
@@ -1526,19 +1514,19 @@
   },
   { "text": "ecosystem-constellation", "ids": [101, 16927, 1011, 15300, 102] },
   {
-    "text": "group: remocn-port, showcase\nwhat: Ecosystem Constellation. Orbiting product nodes connect into a constellation graph.",
+    "text": "group: showcase\nwhat: Ecosystem Constellation. Orbiting product nodes connect into a constellation graph.",
     "ids": [
-      101, 2177, 1024, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 13398, 2054, 1024, 16927, 15300,
-      1012, 26472, 4031, 14164, 7532, 2046, 1037, 15300, 10629, 1012, 102
+      101, 2177, 1024, 13398, 2054, 1024, 16927, 15300, 1012, 26472, 4031, 14164, 7532, 2046, 1037,
+      15300, 10629, 1012, 102
     ]
   },
   { "text": "empty", "ids": [101, 4064, 102] },
   {
-    "text": "group: empty, remocn-port, state, ui-primitive\nwhat: Empty. An Operator Black empty state using open space, a technical icon, clear copy, and neutral action",
+    "text": "group: empty, state, ui-primitive\nwhat: Empty. An Operator Black empty state using open space, a technical icon, clear copy, and neutral action",
     "ids": [
-      101, 2177, 1024, 4064, 1010, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 2110, 1010, 21318,
-      1011, 10968, 2054, 1024, 4064, 1012, 2019, 6872, 2304, 4064, 2110, 2478, 2330, 2686, 1010,
-      1037, 4087, 12696, 1010, 3154, 6100, 1010, 1998, 8699, 2895, 102
+      101, 2177, 1024, 4064, 1010, 2110, 1010, 21318, 1011, 10968, 2054, 1024, 4064, 1012, 2019,
+      6872, 2304, 4064, 2110, 2478, 2330, 2686, 1010, 1037, 4087, 12696, 1010, 3154, 6100, 1010,
+      1998, 8699, 2895, 102
     ]
   },
   { "text": "facet-morph", "ids": [101, 2227, 2102, 1011, 22822, 8458, 102] },
@@ -1568,11 +1556,10 @@
   },
   { "text": "field", "ids": [101, 2492, 102] },
   {
-    "text": "group: field, form, remocn-port, ui-primitive\nwhat: Field. A labeled field wrapper with an accessible control and supporting description",
+    "text": "group: field, form, ui-primitive\nwhat: Field. A labeled field wrapper with an accessible control and supporting description",
     "ids": [
-      101, 2177, 1024, 2492, 1010, 2433, 1010, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 21318,
-      1011, 10968, 2054, 1024, 2492, 1012, 1037, 12599, 2492, 10236, 4842, 2007, 2019, 7801, 2491,
-      1998, 4637, 6412, 102
+      101, 2177, 1024, 2492, 1010, 2433, 1010, 21318, 1011, 10968, 2054, 1024, 2492, 1012, 1037,
+      12599, 2492, 10236, 4842, 2007, 2019, 7801, 2491, 1998, 4637, 6412, 102
     ]
   },
   { "text": "flash-through-white", "ids": [101, 5956, 1011, 2083, 1011, 2317, 102] },
@@ -1603,11 +1590,11 @@
   },
   { "text": "focus-blur-resolve", "ids": [101, 3579, 1011, 14819, 1011, 10663, 102] },
   {
-    "text": "group: motion-primitive, remocn-port, typography\nwhat: Focus Blur Resolve. A premium focus pull from heavy blur to crisp text, then a soft blur-out exit.",
+    "text": "group: motion-primitive, typography\nwhat: Focus Blur Resolve. A premium focus pull from heavy blur to crisp text, then a soft blur-out exit.",
     "ids": [
-      101, 2177, 1024, 4367, 1011, 10968, 1010, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 5939,
-      6873, 12565, 2054, 1024, 3579, 14819, 10663, 1012, 1037, 12882, 3579, 4139, 2013, 3082, 14819,
-      2000, 15594, 3793, 1010, 2059, 1037, 3730, 14819, 1011, 2041, 6164, 1012, 102
+      101, 2177, 1024, 4367, 1011, 10968, 1010, 5939, 6873, 12565, 2054, 1024, 3579, 14819, 10663,
+      1012, 1037, 12882, 3579, 4139, 2013, 3082, 14819, 2000, 15594, 3793, 1010, 2059, 1037, 3730,
+      14819, 1011, 2041, 6164, 1012, 102
     ]
   },
   { "text": "focus-rack", "ids": [101, 3579, 1011, 14513, 102] },
@@ -1635,11 +1622,10 @@
   },
   { "text": "frosted-glass-wipe", "ids": [101, 10097, 2098, 1011, 3221, 1011, 13387, 102] },
   {
-    "text": "group: remocn-port, transition-primitive\nwhat: Frosted Glass Wipe. A scene transition through a moving frosted glass pane.",
+    "text": "group: transition-primitive\nwhat: Frosted Glass Wipe. A scene transition through a moving frosted glass pane.",
     "ids": [
-      101, 2177, 1024, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 6653, 1011, 10968, 2054, 1024,
-      10097, 2098, 3221, 13387, 1012, 1037, 3496, 6653, 2083, 1037, 3048, 10097, 2098, 3221, 6090,
-      2063, 1012, 102
+      101, 2177, 1024, 6653, 1011, 10968, 2054, 1024, 10097, 2098, 3221, 13387, 1012, 1037, 3496,
+      6653, 2083, 1037, 3048, 10097, 2098, 3221, 6090, 2063, 1012, 102
     ]
   },
   { "text": "gesture-tap", "ids": [101, 9218, 1011, 11112, 102] },
@@ -1654,10 +1640,10 @@
   },
   { "text": "glass-code-block", "ids": [101, 3221, 1011, 3642, 1011, 3796, 102] },
   {
-    "text": "group: code-animation, remocn-port\nwhat: Glass Code Block. A translucent code block with scanned line highlights.",
+    "text": "group: code-animation\nwhat: Glass Code Block. A translucent code block with scanned line highlights.",
     "ids": [
-      101, 2177, 1024, 3642, 1011, 7284, 1010, 2128, 5302, 2278, 2078, 1011, 3417, 2054, 1024, 3221,
-      3642, 3796, 1012, 1037, 22897, 3642, 3796, 2007, 11728, 2240, 11637, 1012, 102
+      101, 2177, 1024, 3642, 1011, 7284, 2054, 1024, 3221, 3642, 3796, 1012, 1037, 22897, 3642,
+      3796, 2007, 11728, 2240, 11637, 1012, 102
     ]
   },
   { "text": "glitch", "ids": [101, 1043, 15909, 2818, 102] },
@@ -1779,20 +1765,19 @@
   },
   { "text": "hero-device-assemble", "ids": [101, 5394, 1011, 5080, 1011, 21365, 102] },
   {
-    "text": "group: remocn-port, showcase\nwhat: Hero Device Assemble. A landing-page device hero assembles from layers.",
+    "text": "group: showcase\nwhat: Hero Device Assemble. A landing-page device hero assembles from layers.",
     "ids": [
-      101, 2177, 1024, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 13398, 2054, 1024, 5394, 5080,
-      21365, 1012, 1037, 4899, 1011, 3931, 5080, 5394, 21365, 2015, 2013, 9014, 1012, 102
+      101, 2177, 1024, 13398, 2054, 1024, 5394, 5080, 21365, 1012, 1037, 4899, 1011, 3931, 5080,
+      5394, 21365, 2015, 2013, 9014, 1012, 102
     ]
   },
   { "text": "hover-card", "ids": [101, 25215, 2099, 1011, 4003, 102] },
   {
-    "text": "group: hover-card, overlay, remocn-port, ui-primitive\nwhat: Hover Card. An Operator Black hover card with a matte profile preview and origin-aware Soft Optical reveal",
+    "text": "group: hover-card, overlay, ui-primitive\nwhat: Hover Card. An Operator Black hover card with a matte profile preview and origin-aware Soft Optical reveal",
     "ids": [
-      101, 2177, 1024, 25215, 2099, 1011, 4003, 1010, 2058, 8485, 1010, 2128, 5302, 2278, 2078,
-      1011, 3417, 1010, 21318, 1011, 10968, 2054, 1024, 25215, 2099, 4003, 1012, 2019, 6872, 2304,
-      25215, 2099, 4003, 2007, 1037, 4717, 2063, 6337, 19236, 1998, 4761, 1011, 5204, 3730, 9380,
-      7487, 102
+      101, 2177, 1024, 25215, 2099, 1011, 4003, 1010, 2058, 8485, 1010, 21318, 1011, 10968, 2054,
+      1024, 25215, 2099, 4003, 1012, 2019, 6872, 2304, 25215, 2099, 4003, 2007, 1037, 4717, 2063,
+      6337, 19236, 1998, 4761, 1011, 5204, 3730, 9380, 7487, 102
     ]
   },
   { "text": "icon-morph-beat", "ids": [101, 12696, 1011, 22822, 8458, 1011, 3786, 102] },
@@ -1820,29 +1805,26 @@
     "ids": [101, 3746, 1011, 7818, 1011, 2000, 1011, 2440, 18182, 102]
   },
   {
-    "text": "group: remocn-port, transition-primitive\nwhat: Image Expand to Fullscreen. An image tile expands into a full-frame scene transition.",
+    "text": "group: transition-primitive\nwhat: Image Expand to Fullscreen. An image tile expands into a full-frame scene transition.",
     "ids": [
-      101, 2177, 1024, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 6653, 1011, 10968, 2054, 1024,
-      3746, 7818, 2000, 2440, 18182, 1012, 2019, 3746, 14090, 24545, 2046, 1037, 2440, 1011, 4853,
-      3496, 6653, 1012, 102
+      101, 2177, 1024, 6653, 1011, 10968, 2054, 1024, 3746, 7818, 2000, 2440, 18182, 1012, 2019,
+      3746, 14090, 24545, 2046, 1037, 2440, 1011, 4853, 3496, 6653, 1012, 102
     ]
   },
   { "text": "infinite-bento-pan", "ids": [101, 10709, 1011, 6260, 2080, 1011, 6090, 102] },
   {
-    "text": "group: remocn-port, showcase\nwhat: Infinite Bento Pan. A bento board pans forever with feature cards at different depths.",
+    "text": "group: showcase\nwhat: Infinite Bento Pan. A bento board pans forever with feature cards at different depths.",
     "ids": [
-      101, 2177, 1024, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 13398, 2054, 1024, 10709, 6260,
-      2080, 6090, 1012, 1037, 6260, 2080, 2604, 6090, 2015, 5091, 2007, 3444, 5329, 2012, 2367,
-      11143, 1012, 102
+      101, 2177, 1024, 13398, 2054, 1024, 10709, 6260, 2080, 6090, 1012, 1037, 6260, 2080, 2604,
+      6090, 2015, 5091, 2007, 3444, 5329, 2012, 2367, 11143, 1012, 102
     ]
   },
   { "text": "infinite-marquee", "ids": [101, 10709, 1011, 9388, 4226, 2063, 102] },
   {
-    "text": "group: remocn-port, showcase\nwhat: Infinite Marquee. A looping marquee primitive for logos, tags, and feature pills.",
+    "text": "group: showcase\nwhat: Infinite Marquee. A looping marquee primitive for logos, tags, and feature pills.",
     "ids": [
-      101, 2177, 1024, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 13398, 2054, 1024, 10709, 9388,
-      4226, 2063, 1012, 1037, 7077, 2075, 9388, 4226, 2063, 10968, 2005, 25571, 1010, 22073, 1010,
-      1998, 3444, 15345, 1012, 102
+      101, 2177, 1024, 13398, 2054, 1024, 10709, 9388, 4226, 2063, 1012, 1037, 7077, 2075, 9388,
+      4226, 2063, 10968, 2005, 25571, 1010, 22073, 1010, 1998, 3444, 15345, 1012, 102
     ]
   },
   { "text": "ink-bleed-reveal", "ids": [101, 10710, 1011, 19501, 1011, 7487, 102] },
@@ -1868,11 +1850,11 @@
   },
   { "text": "input", "ids": [101, 7953, 102] },
   {
-    "text": "group: field, input, remocn-port, ui-primitive\nwhat: Input. A video-safe text field with label, helper copy, focus state, and typed-value reveal",
+    "text": "group: field, input, ui-primitive\nwhat: Input. A video-safe text field with label, helper copy, focus state, and typed-value reveal",
     "ids": [
-      101, 2177, 1024, 2492, 1010, 7953, 1010, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 21318,
-      1011, 10968, 2054, 1024, 7953, 1012, 1037, 2678, 1011, 3647, 3793, 2492, 2007, 3830, 1010,
-      2393, 2121, 6100, 1010, 3579, 2110, 1010, 1998, 21189, 1011, 3643, 7487, 102
+      101, 2177, 1024, 2492, 1010, 7953, 1010, 21318, 1011, 10968, 2054, 1024, 7953, 1012, 1037,
+      2678, 1011, 3647, 3793, 2492, 2007, 3830, 1010, 2393, 2121, 6100, 1010, 3579, 2110, 1010,
+      1998, 21189, 1011, 3643, 7487, 102
     ]
   },
   { "text": "input-feedback", "ids": [101, 7953, 1011, 12247, 102] },
@@ -1886,20 +1868,20 @@
   },
   { "text": "input-group", "ids": [101, 7953, 1011, 2177, 102] },
   {
-    "text": "group: field, input-group, remocn-port, ui-primitive\nwhat: Input Group. A compound input with technical prefix, editable value, and attached action",
+    "text": "group: field, input-group, ui-primitive\nwhat: Input Group. A compound input with technical prefix, editable value, and attached action",
     "ids": [
-      101, 2177, 1024, 2492, 1010, 7953, 1011, 2177, 1010, 2128, 5302, 2278, 2078, 1011, 3417, 1010,
-      21318, 1011, 10968, 2054, 1024, 7953, 2177, 1012, 1037, 7328, 7953, 2007, 4087, 17576, 1010,
-      10086, 3085, 3643, 1010, 1998, 4987, 2895, 102
+      101, 2177, 1024, 2492, 1010, 7953, 1011, 2177, 1010, 21318, 1011, 10968, 2054, 1024, 7953,
+      2177, 1012, 1037, 7328, 7953, 2007, 4087, 17576, 1010, 10086, 3085, 3643, 1010, 1998, 4987,
+      2895, 102
     ]
   },
   { "text": "input-otp", "ids": [101, 7953, 1011, 27178, 2361, 102] },
   {
-    "text": "group: field, input-otp, remocn-port, ui-primitive\nwhat: Input OTP. A segmented one-time-code field with tabular digits and an active slot",
+    "text": "group: field, input-otp, ui-primitive\nwhat: Input OTP. A segmented one-time-code field with tabular digits and an active slot",
     "ids": [
-      101, 2177, 1024, 2492, 1010, 7953, 1011, 27178, 2361, 1010, 2128, 5302, 2278, 2078, 1011,
-      3417, 1010, 21318, 1011, 10968, 2054, 1024, 7953, 27178, 2361, 1012, 1037, 6903, 2098, 2028,
-      1011, 2051, 1011, 3642, 2492, 2007, 21628, 7934, 16648, 1998, 2019, 3161, 10453, 102
+      101, 2177, 1024, 2492, 1010, 7953, 1011, 27178, 2361, 1010, 21318, 1011, 10968, 2054, 1024,
+      7953, 27178, 2361, 1012, 1037, 6903, 2098, 2028, 1011, 2051, 1011, 3642, 2492, 2007, 21628,
+      7934, 16648, 1998, 2019, 3161, 10453, 102
     ]
   },
   { "text": "instagram-follow", "ids": [101, 16021, 23091, 1011, 3582, 102] },
@@ -1939,20 +1921,20 @@
   },
   { "text": "item", "ids": [101, 8875, 102] },
   {
-    "text": "group: item, list, remocn-port, ui-primitive\nwhat: Item. A border-led interactive list row with neutral monogram, compact metadata, and deterministic hover state",
+    "text": "group: item, list, ui-primitive\nwhat: Item. A border-led interactive list row with neutral monogram, compact metadata, and deterministic hover state",
     "ids": [
-      101, 2177, 1024, 8875, 1010, 2862, 1010, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 21318,
-      1011, 10968, 2054, 1024, 8875, 1012, 1037, 3675, 1011, 2419, 9123, 2862, 5216, 2007, 8699,
-      18847, 13113, 1010, 9233, 27425, 1010, 1998, 28283, 25300, 10074, 25215, 2099, 2110, 102
+      101, 2177, 1024, 8875, 1010, 2862, 1010, 21318, 1011, 10968, 2054, 1024, 8875, 1012, 1037,
+      3675, 1011, 2419, 9123, 2862, 5216, 2007, 8699, 18847, 13113, 1010, 9233, 27425, 1010, 1998,
+      28283, 25300, 10074, 25215, 2099, 2110, 102
     ]
   },
   { "text": "kbd", "ids": [101, 21677, 2094, 102] },
   {
-    "text": "group: kbd, remocn-port, shortcut, ui-primitive\nwhat: Kbd. A physical keyboard legend with machined keycap depth, system monospace type, and finite press motion",
+    "text": "group: kbd, shortcut, ui-primitive\nwhat: Kbd. A physical keyboard legend with machined keycap depth, system monospace type, and finite press motion",
     "ids": [
-      101, 2177, 1024, 21677, 2094, 1010, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 2460, 12690,
-      1010, 21318, 1011, 10968, 2054, 1024, 21677, 2094, 1012, 1037, 3558, 9019, 5722, 2007, 3698,
-      2094, 3145, 17695, 5995, 1010, 2291, 18847, 23058, 2828, 1010, 1998, 10713, 2811, 4367, 102
+      101, 2177, 1024, 21677, 2094, 1010, 2460, 12690, 1010, 21318, 1011, 10968, 2054, 1024, 21677,
+      2094, 1012, 1037, 3558, 9019, 5722, 2007, 3698, 2094, 3145, 17695, 5995, 1010, 2291, 18847,
+      23058, 2828, 1010, 1998, 10713, 2811, 4367, 102
     ]
   },
   { "text": "keyframe-scrub-stack", "ids": [101, 3145, 15643, 1011, 18157, 1011, 9991, 102] },
@@ -1966,11 +1948,11 @@
   },
   { "text": "kinetic-center-build", "ids": [101, 20504, 1011, 2415, 1011, 3857, 102] },
   {
-    "text": "group: motion-primitive, remocn-port, typography\nwhat: Kinetic Center Build. A centered phrase builder where words push into place until the line locks.",
+    "text": "group: motion-primitive, typography\nwhat: Kinetic Center Build. A centered phrase builder where words push into place until the line locks.",
     "ids": [
-      101, 2177, 1024, 4367, 1011, 10968, 1010, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 5939,
-      6873, 12565, 2054, 1024, 20504, 2415, 3857, 1012, 1037, 8857, 7655, 12508, 2073, 2616, 5245,
-      2046, 2173, 2127, 1996, 2240, 11223, 1012, 102
+      101, 2177, 1024, 4367, 1011, 10968, 1010, 5939, 6873, 12565, 2054, 1024, 20504, 2415, 3857,
+      1012, 1037, 8857, 7655, 12508, 2073, 2616, 5245, 2046, 2173, 2127, 1996, 2240, 11223, 1012,
+      102
     ]
   },
   { "text": "kinetic-type-swap", "ids": [101, 20504, 1011, 2828, 1011, 19948, 102] },
@@ -1987,19 +1969,18 @@
   },
   { "text": "label", "ids": [101, 3830, 102] },
   {
-    "text": "group: form, label, remocn-port, ui-primitive\nwhat: Label. A calm form label with compact requirement metadata for video UI scenes",
+    "text": "group: form, label, ui-primitive\nwhat: Label. A calm form label with compact requirement metadata for video UI scenes",
     "ids": [
-      101, 2177, 1024, 2433, 1010, 3830, 1010, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 21318,
-      1011, 10968, 2054, 1024, 3830, 1012, 1037, 5475, 2433, 3830, 2007, 9233, 9095, 27425, 2005,
-      2678, 21318, 5019, 102
+      101, 2177, 1024, 2433, 1010, 3830, 1010, 21318, 1011, 10968, 2054, 1024, 3830, 1012, 1037,
+      5475, 2433, 3830, 2007, 9233, 9095, 27425, 2005, 2678, 21318, 5019, 102
     ]
   },
   { "text": "landing-code-showcase", "ids": [101, 4899, 1011, 3642, 1011, 13398, 102] },
   {
-    "text": "group: remocn-port, showcase\nwhat: Landing Code Showcase. A product hero where code output becomes a live preview card.",
+    "text": "group: showcase\nwhat: Landing Code Showcase. A product hero where code output becomes a live preview card.",
     "ids": [
-      101, 2177, 1024, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 13398, 2054, 1024, 4899, 3642,
-      13398, 1012, 1037, 4031, 5394, 2073, 3642, 6434, 4150, 1037, 2444, 19236, 4003, 1012, 102
+      101, 2177, 1024, 13398, 2054, 1024, 4899, 3642, 13398, 1012, 1037, 4031, 5394, 2073, 3642,
+      6434, 4150, 1037, 2444, 19236, 4003, 1012, 102
     ]
   },
   { "text": "light-leak", "ids": [101, 2422, 1011, 17271, 102] },
@@ -2028,11 +2009,11 @@
   },
   { "text": "line-by-line-slide", "ids": [101, 2240, 1011, 2011, 1011, 2240, 1011, 7358, 102] },
   {
-    "text": "group: motion-primitive, remocn-port, typography\nwhat: Line-by-Line Slide. Each line enters from the left with staggered slide and exits to the right.",
+    "text": "group: motion-primitive, typography\nwhat: Line-by-Line Slide. Each line enters from the left with staggered slide and exits to the right.",
     "ids": [
-      101, 2177, 1024, 4367, 1011, 10968, 1010, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 5939,
-      6873, 12565, 2054, 1024, 2240, 1011, 2011, 1011, 2240, 7358, 1012, 2169, 2240, 8039, 2013,
-      1996, 2187, 2007, 14648, 7358, 1998, 16639, 2000, 1996, 2157, 1012, 102
+      101, 2177, 1024, 4367, 1011, 10968, 1010, 5939, 6873, 12565, 2054, 1024, 2240, 1011, 2011,
+      1011, 2240, 7358, 1012, 2169, 2240, 8039, 2013, 1996, 2187, 2007, 14648, 7358, 1998, 16639,
+      2000, 1996, 2157, 1012, 102
     ]
   },
   { "text": "line-swap", "ids": [101, 2240, 1011, 19948, 102] },
@@ -2092,11 +2073,10 @@
   },
   { "text": "live-code-compilation", "ids": [101, 2444, 1011, 3642, 1011, 6268, 102] },
   {
-    "text": "group: code-animation, remocn-port\nwhat: Live Code Compilation. A code editor compiles into a preview panel with status ticks.",
+    "text": "group: code-animation\nwhat: Live Code Compilation. A code editor compiles into a preview panel with status ticks.",
     "ids": [
-      101, 2177, 1024, 3642, 1011, 7284, 1010, 2128, 5302, 2278, 2078, 1011, 3417, 2054, 1024, 2444,
-      3642, 6268, 1012, 1037, 3642, 3559, 4012, 22090, 2015, 2046, 1037, 19236, 5997, 2007, 3570,
-      16356, 2015, 1012, 102
+      101, 2177, 1024, 3642, 1011, 7284, 2054, 1024, 2444, 3642, 6268, 1012, 1037, 3642, 3559, 4012,
+      22090, 2015, 2046, 1037, 19236, 5997, 2007, 3570, 16356, 2015, 1012, 102
     ]
   },
   { "text": "locked-nucleus-orbit", "ids": [101, 5299, 1011, 13502, 1011, 8753, 102] },
@@ -2294,20 +2274,18 @@
   },
   { "text": "mask-reveal-up", "ids": [101, 7308, 1011, 7487, 1011, 2039, 102] },
   {
-    "text": "group: motion-primitive, remocn-port, typography\nwhat: Mask Reveal Up. Lines reveal upward through a tight mask with compact stagger.",
+    "text": "group: motion-primitive, typography\nwhat: Mask Reveal Up. Lines reveal upward through a tight mask with compact stagger.",
     "ids": [
-      101, 2177, 1024, 4367, 1011, 10968, 1010, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 5939,
-      6873, 12565, 2054, 1024, 7308, 7487, 2039, 1012, 3210, 7487, 10745, 2083, 1037, 4389, 7308,
-      2007, 9233, 2358, 27609, 1012, 102
+      101, 2177, 1024, 4367, 1011, 10968, 1010, 5939, 6873, 12565, 2054, 1024, 7308, 7487, 2039,
+      1012, 3210, 7487, 10745, 2083, 1037, 4389, 7308, 2007, 9233, 2358, 27609, 1012, 102
     ]
   },
   { "text": "masked-slide-reveal", "ids": [101, 16520, 1011, 7358, 1011, 7487, 102] },
   {
-    "text": "group: motion-primitive, remocn-port, typography\nwhat: Masked Slide Reveal. Words slide up out of an invisible horizontal mask one after another.",
+    "text": "group: motion-primitive, typography\nwhat: Masked Slide Reveal. Words slide up out of an invisible horizontal mask one after another.",
     "ids": [
-      101, 2177, 1024, 4367, 1011, 10968, 1010, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 5939,
-      6873, 12565, 2054, 1024, 16520, 7358, 7487, 1012, 2616, 7358, 2039, 2041, 1997, 2019, 8841,
-      9876, 7308, 2028, 2044, 2178, 1012, 102
+      101, 2177, 1024, 4367, 1011, 10968, 1010, 5939, 6873, 12565, 2054, 1024, 16520, 7358, 7487,
+      1012, 2616, 7358, 2039, 2041, 1997, 2019, 8841, 9876, 7308, 2028, 2044, 2178, 1012, 102
     ]
   },
   { "text": "match-cut", "ids": [101, 2674, 1011, 3013, 102] },
@@ -2325,11 +2303,11 @@
   },
   { "text": "matrix-decode", "ids": [101, 8185, 1011, 21933, 3207, 102] },
   {
-    "text": "group: motion-primitive, remocn-port, typography\nwhat: Matrix Decode. Random scramble resolves left-to-right into the target text.",
+    "text": "group: motion-primitive, typography\nwhat: Matrix Decode. Random scramble resolves left-to-right into the target text.",
     "ids": [
-      101, 2177, 1024, 4367, 1011, 10968, 1010, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 5939,
-      6873, 12565, 2054, 1024, 8185, 21933, 3207, 1012, 6721, 25740, 10663, 2015, 2187, 1011, 2000,
-      1011, 2157, 2046, 1996, 4539, 3793, 1012, 102
+      101, 2177, 1024, 4367, 1011, 10968, 1010, 5939, 6873, 12565, 2054, 1024, 8185, 21933, 3207,
+      1012, 6721, 25740, 10663, 2015, 2187, 1011, 2000, 1011, 2157, 2046, 1996, 4539, 3793, 1012,
+      102
     ]
   },
   { "text": "menu-morph", "ids": [101, 12183, 1011, 22822, 8458, 102] },
@@ -2343,28 +2321,27 @@
   },
   { "text": "menubar", "ids": [101, 12183, 8237, 102] },
   {
-    "text": "group: menubar, navigation, remocn-port, ui-primitive\nwhat: Menubar. A compact matte menubar for editor chrome with physical press response and restrained current-item emphasis",
+    "text": "group: menubar, navigation, ui-primitive\nwhat: Menubar. A compact matte menubar for editor chrome with physical press response and restrained current-item emphasis",
     "ids": [
-      101, 2177, 1024, 12183, 8237, 1010, 9163, 1010, 2128, 5302, 2278, 2078, 1011, 3417, 1010,
-      21318, 1011, 10968, 2054, 1024, 12183, 8237, 1012, 1037, 9233, 4717, 2063, 12183, 8237, 2005,
-      3559, 18546, 2007, 3558, 2811, 3433, 1998, 19868, 2783, 1011, 8875, 7902, 102
+      101, 2177, 1024, 12183, 8237, 1010, 9163, 1010, 21318, 1011, 10968, 2054, 1024, 12183, 8237,
+      1012, 1037, 9233, 4717, 2063, 12183, 8237, 2005, 3559, 18546, 2007, 3558, 2811, 3433, 1998,
+      19868, 2783, 1011, 8875, 7902, 102
     ]
   },
   { "text": "mesh-gradient-bg", "ids": [101, 20437, 1011, 17978, 1011, 1038, 2290, 102] },
   {
-    "text": "group: effect, remocn-port\nwhat: Mesh Gradient Background. A render-safe mesh gradient using animated radial layers.",
+    "text": "group: effect\nwhat: Mesh Gradient Background. A render-safe mesh gradient using animated radial layers.",
     "ids": [
-      101, 2177, 1024, 3466, 1010, 2128, 5302, 2278, 2078, 1011, 3417, 2054, 1024, 20437, 17978,
-      4281, 1012, 1037, 17552, 1011, 3647, 20437, 17978, 2478, 6579, 15255, 9014, 1012, 102
+      101, 2177, 1024, 3466, 2054, 1024, 20437, 17978, 4281, 1012, 1037, 17552, 1011, 3647, 20437,
+      17978, 2478, 6579, 15255, 9014, 1012, 102
     ]
   },
   { "text": "micro-scale-fade", "ids": [101, 12702, 1011, 4094, 1011, 12985, 102] },
   {
-    "text": "group: remocn-port, transition-primitive\nwhat: Micro Scale Fade. A tiny scale-and-opacity transition for UI state changes.",
+    "text": "group: transition-primitive\nwhat: Micro Scale Fade. A tiny scale-and-opacity transition for UI state changes.",
     "ids": [
-      101, 2177, 1024, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 6653, 1011, 10968, 2054, 1024,
-      12702, 4094, 12985, 1012, 1037, 4714, 4094, 1011, 1998, 1011, 6728, 6305, 3012, 6653, 2005,
-      21318, 2110, 3431, 1012, 102
+      101, 2177, 1024, 6653, 1011, 10968, 2054, 1024, 12702, 4094, 12985, 1012, 1037, 4714, 4094,
+      1011, 1998, 1011, 6728, 6305, 3012, 6653, 2005, 21318, 2110, 3431, 1012, 102
     ]
   },
   { "text": "micro-transitions", "ids": [101, 12702, 1011, 22166, 102] },
@@ -2463,20 +2440,20 @@
   },
   { "text": "native-select", "ids": [101, 3128, 1011, 7276, 102] },
   {
-    "text": "group: control, native-select, remocn-port, ui-primitive\nwhat: Native Select. A compact native select with a clear label, technical value, and focus state",
+    "text": "group: control, native-select, ui-primitive\nwhat: Native Select. A compact native select with a clear label, technical value, and focus state",
     "ids": [
-      101, 2177, 1024, 2491, 1010, 3128, 1011, 7276, 1010, 2128, 5302, 2278, 2078, 1011, 3417, 1010,
-      21318, 1011, 10968, 2054, 1024, 3128, 7276, 1012, 1037, 9233, 3128, 7276, 2007, 1037, 3154,
-      3830, 1010, 4087, 3643, 1010, 1998, 3579, 2110, 102
+      101, 2177, 1024, 2491, 1010, 3128, 1011, 7276, 1010, 21318, 1011, 10968, 2054, 1024, 3128,
+      7276, 1012, 1037, 9233, 3128, 7276, 2007, 1037, 3154, 3830, 1010, 4087, 3643, 1010, 1998,
+      3579, 2110, 102
     ]
   },
   { "text": "navigation-menu", "ids": [101, 9163, 1011, 12183, 102] },
   {
-    "text": "group: navigation, navigation-menu, remocn-port, ui-primitive\nwhat: Navigation Menu. An anchored navigation menu with a functional selection edge and opaque trigger-origin preview surface",
+    "text": "group: navigation, navigation-menu, ui-primitive\nwhat: Navigation Menu. An anchored navigation menu with a functional selection edge and opaque trigger-origin preview surface",
     "ids": [
-      101, 2177, 1024, 9163, 1010, 9163, 1011, 12183, 1010, 2128, 5302, 2278, 2078, 1011, 3417,
-      1010, 21318, 1011, 10968, 2054, 1024, 9163, 12183, 1012, 2019, 14453, 9163, 12183, 2007, 1037,
-      8360, 4989, 3341, 1998, 28670, 9495, 1011, 4761, 19236, 3302, 102
+      101, 2177, 1024, 9163, 1010, 9163, 1011, 12183, 1010, 21318, 1011, 10968, 2054, 1024, 9163,
+      12183, 1012, 2019, 14453, 9163, 12183, 2007, 1037, 8360, 4989, 3341, 1998, 28670, 9495, 1011,
+      4761, 19236, 3302, 102
     ]
   },
   { "text": "news-ticker", "ids": [101, 2739, 1011, 16356, 2121, 102] },
@@ -2565,11 +2542,11 @@
     "ids": [101, 27120, 2075, 1011, 29096, 2099, 1011, 4834, 102]
   },
   {
-    "text": "group: onboarding, remocn-port, stepper, ui-flow\nwhat: Onboarding Stepper Flow. A composed onboarding flow with milestone rail, active step card, and next-action button",
+    "text": "group: onboarding, stepper, ui-flow\nwhat: Onboarding Stepper Flow. A composed onboarding flow with milestone rail, active step card, and next-action button",
     "ids": [
-      101, 2177, 1024, 27120, 2075, 1010, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 29096, 2099,
-      1010, 21318, 1011, 4834, 2054, 1024, 27120, 2075, 29096, 2099, 4834, 1012, 1037, 3605, 27120,
-      2075, 4834, 2007, 19199, 4334, 1010, 3161, 3357, 4003, 1010, 1998, 2279, 1011, 2895, 6462, 102
+      101, 2177, 1024, 27120, 2075, 1010, 29096, 2099, 1010, 21318, 1011, 4834, 2054, 1024, 27120,
+      2075, 29096, 2099, 4834, 1012, 1037, 3605, 27120, 2075, 4834, 2007, 19199, 4334, 1010, 3161,
+      3357, 4003, 1010, 1998, 2279, 1011, 2895, 6462, 102
     ]
   },
   { "text": "orbit-ring-camera", "ids": [101, 8753, 1011, 3614, 1011, 4950, 102] },
@@ -2650,12 +2627,11 @@
   },
   { "text": "pagination", "ids": [101, 6643, 20876, 3508, 102] },
   {
-    "text": "group: navigation, pagination, remocn-port, ui-primitive\nwhat: Pagination. A tactile pagination row with 40px controls, a recessed current page, and deterministic press feedback",
+    "text": "group: navigation, pagination, ui-primitive\nwhat: Pagination. A tactile pagination row with 40px controls, a recessed current page, and deterministic press feedback",
     "ids": [
-      101, 2177, 1024, 9163, 1010, 6643, 20876, 3508, 1010, 2128, 5302, 2278, 2078, 1011, 3417,
-      1010, 21318, 1011, 10968, 2054, 1024, 6643, 20876, 3508, 1012, 1037, 11937, 6593, 9463, 6643,
-      20876, 3508, 5216, 2007, 2871, 2361, 2595, 7711, 1010, 1037, 28290, 2098, 2783, 3931, 1010,
-      1998, 28283, 25300, 10074, 2811, 12247, 102
+      101, 2177, 1024, 9163, 1010, 6643, 20876, 3508, 1010, 21318, 1011, 10968, 2054, 1024, 6643,
+      20876, 3508, 1012, 1037, 11937, 6593, 9463, 6643, 20876, 3508, 5216, 2007, 2871, 2361, 2595,
+      7711, 1010, 1037, 28290, 2098, 2783, 3931, 1010, 1998, 28283, 25300, 10074, 2811, 12247, 102
     ]
   },
   { "text": "pan-stations", "ids": [101, 6090, 1011, 3703, 102] },
@@ -2734,20 +2710,19 @@
   },
   { "text": "per-character-rise", "ids": [101, 2566, 1011, 2839, 1011, 4125, 102] },
   {
-    "text": "group: motion-primitive, remocn-port, typography\nwhat: Per Character Rise. Letters slide up from below with crisp, deliberate kinetic timing.",
+    "text": "group: motion-primitive, typography\nwhat: Per Character Rise. Letters slide up from below with crisp, deliberate kinetic timing.",
     "ids": [
-      101, 2177, 1024, 4367, 1011, 10968, 1010, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 5939,
-      6873, 12565, 2054, 1024, 2566, 2839, 4125, 1012, 4144, 7358, 2039, 2013, 2917, 2007, 15594,
-      1010, 15063, 20504, 10984, 1012, 102
+      101, 2177, 1024, 4367, 1011, 10968, 1010, 5939, 6873, 12565, 2054, 1024, 2566, 2839, 4125,
+      1012, 4144, 7358, 2039, 2013, 2917, 2007, 15594, 1010, 15063, 20504, 10984, 1012, 102
     ]
   },
   { "text": "per-word-crossfade", "ids": [101, 2566, 1011, 2773, 1011, 2892, 7011, 3207, 102] },
   {
-    "text": "group: motion-primitive, remocn-port, typography\nwhat: Per-Word Crossfade. Words gently fade into place with a short vertical drift for calm keynote rhythm.",
+    "text": "group: motion-primitive, typography\nwhat: Per-Word Crossfade. Words gently fade into place with a short vertical drift for calm keynote rhythm.",
     "ids": [
-      101, 2177, 1024, 4367, 1011, 10968, 1010, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 5939,
-      6873, 12565, 2054, 1024, 2566, 1011, 2773, 2892, 7011, 3207, 1012, 2616, 5251, 12985, 2046,
-      2173, 2007, 1037, 2460, 7471, 11852, 2005, 5475, 25569, 6348, 1012, 102
+      101, 2177, 1024, 4367, 1011, 10968, 1010, 5939, 6873, 12565, 2054, 1024, 2566, 1011, 2773,
+      2892, 7011, 3207, 1012, 2616, 5251, 12985, 2046, 2173, 2007, 1037, 2460, 7471, 11852, 2005,
+      5475, 25569, 6348, 1012, 102
     ]
   },
   { "text": "per-word-rise", "ids": [101, 2566, 1011, 2773, 1011, 4125, 102] },
@@ -2776,11 +2751,11 @@
   },
   { "text": "perspective-marquee", "ids": [101, 7339, 1011, 9388, 4226, 2063, 102] },
   {
-    "text": "group: motion-primitive, remocn-port, typography\nwhat: Perspective Marquee. A 3D tilted marquee with depth feel as items roll toward the horizon.",
+    "text": "group: motion-primitive, typography\nwhat: Perspective Marquee. A 3D tilted marquee with depth feel as items roll toward the horizon.",
     "ids": [
-      101, 2177, 1024, 4367, 1011, 10968, 1010, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 5939,
-      6873, 12565, 2054, 1024, 7339, 9388, 4226, 2063, 1012, 1037, 7605, 9939, 9388, 4226, 2063,
-      2007, 5995, 2514, 2004, 5167, 4897, 2646, 1996, 9154, 1012, 102
+      101, 2177, 1024, 4367, 1011, 10968, 1010, 5939, 6873, 12565, 2054, 1024, 7339, 9388, 4226,
+      2063, 1012, 1037, 7605, 9939, 9388, 4226, 2063, 2007, 5995, 2514, 2004, 5167, 4897, 2646,
+      1996, 9154, 1012, 102
     ]
   },
   { "text": "physical-exit", "ids": [101, 3558, 1011, 6164, 102] },
@@ -2822,11 +2797,11 @@
   },
   { "text": "popover", "ids": [101, 3769, 7840, 102] },
   {
-    "text": "group: overlay, popover, remocn-port, ui-primitive\nwhat: Popover. An Operator Black anchored popover with a matte surface and trigger-origin Soft Optical motion",
+    "text": "group: overlay, popover, ui-primitive\nwhat: Popover. An Operator Black anchored popover with a matte surface and trigger-origin Soft Optical motion",
     "ids": [
-      101, 2177, 1024, 2058, 8485, 1010, 3769, 7840, 1010, 2128, 5302, 2278, 2078, 1011, 3417, 1010,
-      21318, 1011, 10968, 2054, 1024, 3769, 7840, 1012, 2019, 6872, 2304, 14453, 3769, 7840, 2007,
-      1037, 4717, 2063, 3302, 1998, 9495, 1011, 4761, 3730, 9380, 4367, 102
+      101, 2177, 1024, 2058, 8485, 1010, 3769, 7840, 1010, 21318, 1011, 10968, 2054, 1024, 3769,
+      7840, 1012, 2019, 6872, 2304, 14453, 3769, 7840, 2007, 1037, 4717, 2063, 3302, 1998, 9495,
+      1011, 4761, 3730, 9380, 4367, 102
     ]
   },
   { "text": "press-ripple", "ids": [101, 2811, 1011, 24644, 102] },
@@ -2844,28 +2819,26 @@
   },
   { "text": "pricing-tier-focus", "ids": [101, 20874, 1011, 7563, 1011, 3579, 102] },
   {
-    "text": "group: remocn-port, showcase\nwhat: Pricing Tier Focus. Pricing cards shift focus from free to pro with spotlight emphasis.",
+    "text": "group: showcase\nwhat: Pricing Tier Focus. Pricing cards shift focus from free to pro with spotlight emphasis.",
     "ids": [
-      101, 2177, 1024, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 13398, 2054, 1024, 20874, 7563,
-      3579, 1012, 20874, 5329, 5670, 3579, 2013, 2489, 2000, 4013, 2007, 17763, 7902, 1012, 102
+      101, 2177, 1024, 13398, 2054, 1024, 20874, 7563, 3579, 1012, 20874, 5329, 5670, 3579, 2013,
+      2489, 2000, 4013, 2007, 17763, 7902, 1012, 102
     ]
   },
   { "text": "progress", "ids": [101, 5082, 102] },
   {
-    "text": "group: progress, remocn-port, status, ui-primitive\nwhat: Progress. An Operator Black progress primitive with a mint active segment and tabular percentage value",
+    "text": "group: progress, status, ui-primitive\nwhat: Progress. An Operator Black progress primitive with a mint active segment and tabular percentage value",
     "ids": [
-      101, 2177, 1024, 5082, 1010, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 3570, 1010, 21318,
-      1011, 10968, 2054, 1024, 5082, 1012, 2019, 6872, 2304, 5082, 10968, 2007, 1037, 12927, 3161,
-      6903, 1998, 21628, 7934, 7017, 3643, 102
+      101, 2177, 1024, 5082, 1010, 3570, 1010, 21318, 1011, 10968, 2054, 1024, 5082, 1012, 2019,
+      6872, 2304, 5082, 10968, 2007, 1037, 12927, 3161, 6903, 1998, 21628, 7934, 7017, 3643, 102
     ]
   },
   { "text": "progress-steps", "ids": [101, 5082, 1011, 4084, 102] },
   {
-    "text": "group: remocn-port, ui-primitive\nwhat: Progress Steps. A vertical progress sequence with clear complete, current, and waiting states.",
+    "text": "group: ui-primitive\nwhat: Progress Steps. A vertical progress sequence with clear complete, current, and waiting states.",
     "ids": [
-      101, 2177, 1024, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 21318, 1011, 10968, 2054, 1024,
-      5082, 4084, 1012, 1037, 7471, 5082, 5537, 2007, 3154, 3143, 1010, 2783, 1010, 1998, 3403,
-      2163, 1012, 102
+      101, 2177, 1024, 21318, 1011, 10968, 2054, 1024, 5082, 4084, 1012, 1037, 7471, 5082, 5537,
+      2007, 3154, 3143, 1010, 2783, 1010, 1998, 3403, 2163, 1012, 102
     ]
   },
   { "text": "pull-back-reveal", "ids": [101, 4139, 1011, 2067, 1011, 7487, 102] },
@@ -2914,11 +2887,10 @@
   },
   { "text": "radio", "ids": [101, 2557, 102] },
   {
-    "text": "group: control, radio, remocn-port, ui-primitive\nwhat: Radio Group. An accessible radio group with restrained selection and active-label emphasis",
+    "text": "group: control, radio, ui-primitive\nwhat: Radio Group. An accessible radio group with restrained selection and active-label emphasis",
     "ids": [
-      101, 2177, 1024, 2491, 1010, 2557, 1010, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 21318,
-      1011, 10968, 2054, 1024, 2557, 2177, 1012, 2019, 7801, 2557, 2177, 2007, 19868, 4989, 1998,
-      3161, 1011, 3830, 7902, 102
+      101, 2177, 1024, 2491, 1010, 2557, 1010, 21318, 1011, 10968, 2054, 1024, 2557, 2177, 1012,
+      2019, 7801, 2557, 2177, 2007, 19868, 4989, 1998, 3161, 1011, 3830, 7902, 102
     ]
   },
   { "text": "rank-list-settle", "ids": [101, 4635, 1011, 2862, 1011, 7392, 102] },
@@ -2958,30 +2930,27 @@
   },
   { "text": "registry", "ids": [101, 15584, 102] },
   {
-    "text": "group: remocn-port, ui-primitive\nwhat: Registry. An Operator Black registry list for compact installable-component metadata.",
+    "text": "group: ui-primitive\nwhat: Registry. An Operator Black registry list for compact installable-component metadata.",
     "ids": [
-      101, 2177, 1024, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 21318, 1011, 10968, 2054, 1024,
-      15584, 1012, 2019, 6872, 2304, 15584, 2862, 2005, 9233, 16500, 3085, 1011, 6922, 27425, 1012,
-      102
+      101, 2177, 1024, 21318, 1011, 10968, 2054, 1024, 15584, 1012, 2019, 6872, 2304, 15584, 2862,
+      2005, 9233, 16500, 3085, 1011, 6922, 27425, 1012, 102
     ]
   },
-  { "text": "remocn-ui", "ids": [101, 2128, 5302, 2278, 2078, 1011, 21318, 102] },
+  { "text": "component-library", "ids": [101, 6922, 1011, 3075, 102] },
   {
-    "text": "group: remocn-port, ui-primitive\nwhat: Remocn UI. An Operator Black summary of the UI primitive families available in HyperFrames.",
+    "text": "group: ui-primitive\nwhat: Component Library. An Operator Black summary of the UI primitive families available in HyperFrames.",
     "ids": [
-      101, 2177, 1024, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 21318, 1011, 10968, 2054, 1024,
-      2128, 5302, 2278, 2078, 21318, 1012, 2019, 6872, 2304, 12654, 1997, 1996, 21318, 10968, 2945,
-      2800, 1999, 23760, 15643, 2015, 1012, 102
+      101, 2177, 1024, 21318, 1011, 10968, 2054, 1024, 6922, 3075, 1012, 2019, 6872, 2304, 12654,
+      1997, 1996, 21318, 10968, 2945, 2800, 1999, 23760, 15643, 2015, 1012, 102
     ]
   },
   { "text": "resizable", "ids": [101, 24501, 21335, 3468, 102] },
   {
-    "text": "group: layout, remocn-port, resizable, ui-primitive\nwhat: Resizable. An accessible split-pane primitive with structural edges, a keyboard-focusable handle, and deterministic resizing",
+    "text": "group: layout, resizable, ui-primitive\nwhat: Resizable. An accessible split-pane primitive with structural edges, a keyboard-focusable handle, and deterministic resizing",
     "ids": [
-      101, 2177, 1024, 9621, 1010, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 24501, 21335, 3468,
-      1010, 21318, 1011, 10968, 2054, 1024, 24501, 21335, 3468, 1012, 2019, 7801, 3975, 1011, 6090,
-      2063, 10968, 2007, 8332, 7926, 1010, 1037, 9019, 1011, 3579, 3085, 5047, 1010, 1998, 28283,
-      25300, 10074, 24501, 6026, 102
+      101, 2177, 1024, 9621, 1010, 24501, 21335, 3468, 1010, 21318, 1011, 10968, 2054, 1024, 24501,
+      21335, 3468, 1012, 2019, 7801, 3975, 1011, 6090, 2063, 10968, 2007, 8332, 7926, 1010, 1037,
+      9019, 1011, 3579, 3085, 5047, 1010, 1998, 28283, 25300, 10074, 24501, 6026, 102
     ]
   },
   {
@@ -2989,11 +2958,11 @@
     "ids": [101, 1054, 18259, 1011, 1043, 15909, 2818, 1011, 3793, 102]
   },
   {
-    "text": "group: motion-primitive, remocn-port, typography\nwhat: RGB Glitch Text. RGB-offset text copies jitter briefly for a controlled glitch window.",
+    "text": "group: motion-primitive, typography\nwhat: RGB Glitch Text. RGB-offset text copies jitter briefly for a controlled glitch window.",
     "ids": [
-      101, 2177, 1024, 4367, 1011, 10968, 1010, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 5939,
-      6873, 12565, 2054, 1024, 1054, 18259, 1043, 15909, 2818, 3793, 1012, 1054, 18259, 1011, 16396,
-      3793, 4809, 10147, 12079, 4780, 2005, 1037, 4758, 1043, 15909, 2818, 3332, 1012, 102
+      101, 2177, 1024, 4367, 1011, 10968, 1010, 5939, 6873, 12565, 2054, 1024, 1054, 18259, 1043,
+      15909, 2818, 3793, 1012, 1054, 18259, 1011, 16396, 3793, 4809, 10147, 12079, 4780, 2005, 1037,
+      4758, 1043, 15909, 2818, 3332, 1012, 102
     ]
   },
   { "text": "ridged-burn", "ids": [101, 5526, 2094, 1011, 6402, 102] },
@@ -3014,11 +2983,11 @@
   },
   { "text": "rolling-number", "ids": [101, 5291, 1011, 2193, 102] },
   {
-    "text": "group: motion-primitive, remocn-port, typography\nwhat: Rolling Number. Odometer-style number places roll at their own speed and settle exactly.",
+    "text": "group: motion-primitive, typography\nwhat: Rolling Number. Odometer-style number places roll at their own speed and settle exactly.",
     "ids": [
-      101, 2177, 1024, 4367, 1011, 10968, 1010, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 5939,
-      6873, 12565, 2054, 1024, 5291, 2193, 1012, 1051, 26173, 3334, 1011, 2806, 2193, 3182, 4897,
-      2012, 2037, 2219, 3177, 1998, 7392, 3599, 1012, 102
+      101, 2177, 1024, 4367, 1011, 10968, 1010, 5939, 6873, 12565, 2054, 1024, 5291, 2193, 1012,
+      1051, 26173, 3334, 1011, 2806, 2193, 3182, 4897, 2012, 2037, 2219, 3177, 1998, 7392, 3599,
+      1012, 102
     ]
   },
   { "text": "rubber-band-bumper", "ids": [101, 8903, 1011, 2316, 1011, 21519, 102] },
@@ -3034,11 +3003,11 @@
   },
   { "text": "scale-down-fade", "ids": [101, 4094, 1011, 2091, 1011, 12985, 102] },
   {
-    "text": "group: motion-primitive, remocn-port, typography\nwhat: Scale Down Fade. A restrained premium settle-in followed by scale-down fade readiness.",
+    "text": "group: motion-primitive, typography\nwhat: Scale Down Fade. A restrained premium settle-in followed by scale-down fade readiness.",
     "ids": [
-      101, 2177, 1024, 4367, 1011, 10968, 1010, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 5939,
-      6873, 12565, 2054, 1024, 4094, 2091, 12985, 1012, 1037, 19868, 12882, 7392, 1011, 1999, 2628,
-      2011, 4094, 1011, 2091, 12985, 19822, 1012, 102
+      101, 2177, 1024, 4367, 1011, 10968, 1010, 5939, 6873, 12565, 2054, 1024, 4094, 2091, 12985,
+      1012, 1037, 19868, 12882, 7392, 1011, 1999, 2628, 2011, 4094, 1011, 2091, 12985, 19822, 1012,
+      102
     ]
   },
   { "text": "scan-band", "ids": [101, 13594, 1011, 2316, 102] },
@@ -3078,12 +3047,11 @@
   },
   { "text": "scroll-area", "ids": [101, 17186, 1011, 2181, 102] },
   {
-    "text": "group: layout, remocn-port, scroll-area, ui-primitive\nwhat: Scroll Area. A focused matte viewport with spacing-led list content and synchronized seek-safe scrollbar motion",
+    "text": "group: layout, scroll-area, ui-primitive\nwhat: Scroll Area. A focused matte viewport with spacing-led list content and synchronized seek-safe scrollbar motion",
     "ids": [
-      101, 2177, 1024, 9621, 1010, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 17186, 1011, 2181,
-      1010, 21318, 1011, 10968, 2054, 1024, 17186, 2181, 1012, 1037, 4208, 4717, 2063, 3193, 6442,
-      2007, 12403, 6129, 1011, 2419, 2862, 4180, 1998, 25549, 6148, 1011, 3647, 17186, 8237, 4367,
-      102
+      101, 2177, 1024, 9621, 1010, 17186, 1011, 2181, 1010, 21318, 1011, 10968, 2054, 1024, 17186,
+      2181, 1012, 1037, 4208, 4717, 2063, 3193, 6442, 2007, 12403, 6129, 1011, 2419, 2862, 4180,
+      1998, 25549, 6148, 1011, 3647, 17186, 8237, 4367, 102
     ]
   },
   { "text": "scroll-camera-story", "ids": [101, 17186, 1011, 4950, 1011, 2466, 102] },
@@ -3132,39 +3100,36 @@
   },
   { "text": "select", "ids": [101, 7276, 102] },
   {
-    "text": "group: control, remocn-port, select, ui-primitive\nwhat: Select. An origin-aware select with a matte menu and explicit selected option",
+    "text": "group: control, select, ui-primitive\nwhat: Select. An origin-aware select with a matte menu and explicit selected option",
     "ids": [
-      101, 2177, 1024, 2491, 1010, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 7276, 1010, 21318,
-      1011, 10968, 2054, 1024, 7276, 1012, 2019, 4761, 1011, 5204, 7276, 2007, 1037, 4717, 2063,
-      12183, 1998, 13216, 3479, 5724, 102
+      101, 2177, 1024, 2491, 1010, 7276, 1010, 21318, 1011, 10968, 2054, 1024, 7276, 1012, 2019,
+      4761, 1011, 5204, 7276, 2007, 1037, 4717, 2063, 12183, 1998, 13216, 3479, 5724, 102
     ]
   },
   { "text": "select-item", "ids": [101, 7276, 1011, 8875, 102] },
   {
-    "text": "group: remocn-port, ui-primitive\nwhat: Select Item. A compact option list with selection check, technical hints, and disabled state.",
+    "text": "group: ui-primitive\nwhat: Select Item. A compact option list with selection check, technical hints, and disabled state.",
     "ids": [
-      101, 2177, 1024, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 21318, 1011, 10968, 2054, 1024,
-      7276, 8875, 1012, 1037, 9233, 5724, 2862, 2007, 4989, 4638, 1010, 4087, 20385, 1010, 1998,
-      9776, 2110, 1012, 102
+      101, 2177, 1024, 21318, 1011, 10968, 2054, 1024, 7276, 8875, 1012, 1037, 9233, 5724, 2862,
+      2007, 4989, 4638, 1010, 4087, 20385, 1010, 1998, 9776, 2110, 1012, 102
     ]
   },
   { "text": "separator", "ids": [101, 19802, 25879, 2953, 102] },
   {
-    "text": "group: layout, remocn-port, separator, ui-primitive\nwhat: Separator. A one-pixel structural separator with horizontal and vertical variants plus a seek-safe progress reveal",
+    "text": "group: layout, separator, ui-primitive\nwhat: Separator. A one-pixel structural separator with horizontal and vertical variants plus a seek-safe progress reveal",
     "ids": [
-      101, 2177, 1024, 9621, 1010, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 19802, 25879, 2953,
-      1010, 21318, 1011, 10968, 2054, 1024, 19802, 25879, 2953, 1012, 1037, 2028, 1011, 22138, 8332,
-      19802, 25879, 2953, 2007, 9876, 1998, 7471, 10176, 4606, 1037, 6148, 1011, 3647, 5082, 7487,
-      102
+      101, 2177, 1024, 9621, 1010, 19802, 25879, 2953, 1010, 21318, 1011, 10968, 2054, 1024, 19802,
+      25879, 2953, 1012, 1037, 2028, 1011, 22138, 8332, 19802, 25879, 2953, 2007, 9876, 1998, 7471,
+      10176, 4606, 1037, 6148, 1011, 3647, 5082, 7487, 102
     ]
   },
   { "text": "settings-toggle-flow", "ids": [101, 10906, 1011, 2000, 24679, 1011, 4834, 102] },
   {
-    "text": "group: remocn-port, settings, toggle, ui-flow\nwhat: Settings Toggle Flow. A composed settings flow with preference rows, toggle switches, and active-state feedback",
+    "text": "group: settings, toggle, ui-flow\nwhat: Settings Toggle Flow. A composed settings flow with preference rows, toggle switches, and active-state feedback",
     "ids": [
-      101, 2177, 1024, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 10906, 1010, 2000, 24679, 1010,
-      21318, 1011, 4834, 2054, 1024, 10906, 2000, 24679, 4834, 1012, 1037, 3605, 10906, 4834, 2007,
-      12157, 10281, 1010, 2000, 24679, 15924, 1010, 1998, 3161, 1011, 2110, 12247, 102
+      101, 2177, 1024, 10906, 1010, 2000, 24679, 1010, 21318, 1011, 4834, 2054, 1024, 10906, 2000,
+      24679, 4834, 1012, 1037, 3605, 10906, 4834, 2007, 12157, 10281, 1010, 2000, 24679, 15924,
+      1010, 1998, 3161, 1011, 2110, 12247, 102
     ]
   },
   { "text": "shader-displacement-panel", "ids": [101, 8703, 2099, 1011, 13508, 1011, 5997, 102] },
@@ -3178,29 +3143,27 @@
   },
   { "text": "shared-axis-y", "ids": [101, 4207, 1011, 8123, 1011, 1061, 102] },
   {
-    "text": "group: motion-primitive, remocn-port, typography\nwhat: Shared Axis Y. Per-word vertical shared-axis transition for sharp editorial swaps.",
+    "text": "group: motion-primitive, typography\nwhat: Shared Axis Y. Per-word vertical shared-axis transition for sharp editorial swaps.",
     "ids": [
-      101, 2177, 1024, 4367, 1011, 10968, 1010, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 5939,
-      6873, 12565, 2054, 1024, 4207, 8123, 1061, 1012, 2566, 1011, 2773, 7471, 4207, 1011, 8123,
-      6653, 2005, 4629, 8368, 19948, 2015, 1012, 102
+      101, 2177, 1024, 4367, 1011, 10968, 1010, 5939, 6873, 12565, 2054, 1024, 4207, 8123, 1061,
+      1012, 2566, 1011, 2773, 7471, 4207, 1011, 8123, 6653, 2005, 4629, 8368, 19948, 2015, 1012, 102
     ]
   },
   { "text": "shared-axis-z", "ids": [101, 4207, 1011, 8123, 1011, 1062, 102] },
   {
-    "text": "group: motion-primitive, remocn-port, typography\nwhat: Shared Axis Z. Scale-based shared-axis transition for focus shifts and context depth.",
+    "text": "group: motion-primitive, typography\nwhat: Shared Axis Z. Scale-based shared-axis transition for focus shifts and context depth.",
     "ids": [
-      101, 2177, 1024, 4367, 1011, 10968, 1010, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 5939,
-      6873, 12565, 2054, 1024, 4207, 8123, 1062, 1012, 4094, 1011, 2241, 4207, 1011, 8123, 6653,
-      2005, 3579, 12363, 1998, 6123, 5995, 1012, 102
+      101, 2177, 1024, 4367, 1011, 10968, 1010, 5939, 6873, 12565, 2054, 1024, 4207, 8123, 1062,
+      1012, 4094, 1011, 2241, 4207, 1011, 8123, 6653, 2005, 3579, 12363, 1998, 6123, 5995, 1012, 102
     ]
   },
   { "text": "sheet", "ids": [101, 7123, 102] },
   {
-    "text": "group: overlay, remocn-port, sheet, ui-primitive\nwhat: Sheet. An Operator Black side sheet with a flat backdrop and right-edge Soft Optical motion",
+    "text": "group: overlay, sheet, ui-primitive\nwhat: Sheet. An Operator Black side sheet with a flat backdrop and right-edge Soft Optical motion",
     "ids": [
-      101, 2177, 1024, 2058, 8485, 1010, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 7123, 1010,
-      21318, 1011, 10968, 2054, 1024, 7123, 1012, 2019, 6872, 2304, 2217, 7123, 2007, 1037, 4257,
-      18876, 1998, 2157, 1011, 3341, 3730, 9380, 4367, 102
+      101, 2177, 1024, 2058, 8485, 1010, 7123, 1010, 21318, 1011, 10968, 2054, 1024, 7123, 1012,
+      2019, 6872, 2304, 2217, 7123, 2007, 1037, 4257, 18876, 1998, 2157, 1011, 3341, 3730, 9380,
+      4367, 102
     ]
   },
   { "text": "shimmer-sweep", "ids": [101, 11895, 15810, 1011, 11740, 102] },
@@ -3214,39 +3177,37 @@
   },
   { "text": "short-slide-down", "ids": [101, 2460, 1011, 7358, 1011, 2091, 102] },
   {
-    "text": "group: motion-primitive, remocn-port, typography\nwhat: Short Slide Down. New words drop from above and push the stack downward into a locked composition.",
+    "text": "group: motion-primitive, typography\nwhat: Short Slide Down. New words drop from above and push the stack downward into a locked composition.",
     "ids": [
-      101, 2177, 1024, 4367, 1011, 10968, 1010, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 5939,
-      6873, 12565, 2054, 1024, 2460, 7358, 2091, 1012, 2047, 2616, 4530, 2013, 2682, 1998, 5245,
-      1996, 9991, 14047, 2046, 1037, 5299, 5512, 1012, 102
+      101, 2177, 1024, 4367, 1011, 10968, 1010, 5939, 6873, 12565, 2054, 1024, 2460, 7358, 2091,
+      1012, 2047, 2616, 4530, 2013, 2682, 1998, 5245, 1996, 9991, 14047, 2046, 1037, 5299, 5512,
+      1012, 102
     ]
   },
   { "text": "short-slide-right", "ids": [101, 2460, 1011, 7358, 1011, 2157, 102] },
   {
-    "text": "group: motion-primitive, remocn-port, typography\nwhat: Short Slide Right. The phrase glides in from the left while words reveal in sequence.",
+    "text": "group: motion-primitive, typography\nwhat: Short Slide Right. The phrase glides in from the left while words reveal in sequence.",
     "ids": [
-      101, 2177, 1024, 4367, 1011, 10968, 1010, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 5939,
-      6873, 12565, 2054, 1024, 2460, 7358, 2157, 1012, 1996, 7655, 21096, 2015, 1999, 2013, 1996,
-      2187, 2096, 2616, 7487, 1999, 5537, 1012, 102
+      101, 2177, 1024, 4367, 1011, 10968, 1010, 5939, 6873, 12565, 2054, 1024, 2460, 7358, 2157,
+      1012, 1996, 7655, 21096, 2015, 1999, 2013, 1996, 2187, 2096, 2616, 7487, 1999, 5537, 1012, 102
     ]
   },
   { "text": "sidebar", "ids": [101, 2217, 8237, 102] },
   {
-    "text": "group: navigation, remocn-port, sidebar, ui-primitive\nwhat: Sidebar. A single-plane sidebar with spacious link rhythm, logical-start selection, and soft deterministic entry motion",
+    "text": "group: navigation, sidebar, ui-primitive\nwhat: Sidebar. A single-plane sidebar with spacious link rhythm, logical-start selection, and soft deterministic entry motion",
     "ids": [
-      101, 2177, 1024, 9163, 1010, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 2217, 8237, 1010,
-      21318, 1011, 10968, 2054, 1024, 2217, 8237, 1012, 1037, 2309, 1011, 4946, 2217, 8237, 2007,
-      22445, 4957, 6348, 1010, 11177, 1011, 2707, 4989, 1010, 1998, 3730, 28283, 25300, 10074, 4443,
-      4367, 102
+      101, 2177, 1024, 9163, 1010, 2217, 8237, 1010, 21318, 1011, 10968, 2054, 1024, 2217, 8237,
+      1012, 1037, 2309, 1011, 4946, 2217, 8237, 2007, 22445, 4957, 6348, 1010, 11177, 1011, 2707,
+      4989, 1010, 1998, 3730, 28283, 25300, 10074, 4443, 4367, 102
     ]
   },
   { "text": "signup-flow", "ids": [101, 3696, 6279, 1011, 4834, 102] },
   {
-    "text": "group: form, remocn-port, signup, ui-flow\nwhat: Signup Flow. A composed signup flow with social action, email field, password field, and submit button",
+    "text": "group: form, signup, ui-flow\nwhat: Signup Flow. A composed signup flow with social action, email field, password field, and submit button",
     "ids": [
-      101, 2177, 1024, 2433, 1010, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 3696, 6279, 1010,
-      21318, 1011, 4834, 2054, 1024, 3696, 6279, 4834, 1012, 1037, 3605, 3696, 6279, 4834, 2007,
-      2591, 2895, 1010, 10373, 2492, 1010, 20786, 2492, 1010, 1998, 12040, 6462, 102
+      101, 2177, 1024, 2433, 1010, 3696, 6279, 1010, 21318, 1011, 4834, 2054, 1024, 3696, 6279,
+      4834, 1012, 1037, 3605, 3696, 6279, 4834, 2007, 2591, 2895, 1010, 10373, 2492, 1010, 20786,
+      2492, 1010, 1998, 12040, 6462, 102
     ]
   },
   { "text": "simulated-cursor", "ids": [101, 23599, 1011, 12731, 25301, 2099, 102] },
@@ -3261,20 +3222,19 @@
   },
   { "text": "skeleton", "ids": [101, 13526, 102] },
   {
-    "text": "group: loading, remocn-port, skeleton, ui-primitive\nwhat: Skeleton. An Operator Black loading skeleton using deterministic solid layers instead of gradient shimmer",
+    "text": "group: loading, skeleton, ui-primitive\nwhat: Skeleton. An Operator Black loading skeleton using deterministic solid layers instead of gradient shimmer",
     "ids": [
-      101, 2177, 1024, 10578, 1010, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 13526, 1010, 21318,
-      1011, 10968, 2054, 1024, 13526, 1012, 2019, 6872, 2304, 10578, 13526, 2478, 28283, 25300,
-      10074, 5024, 9014, 2612, 1997, 17978, 11895, 15810, 102
+      101, 2177, 1024, 10578, 1010, 13526, 1010, 21318, 1011, 10968, 2054, 1024, 13526, 1012, 2019,
+      6872, 2304, 10578, 13526, 2478, 28283, 25300, 10074, 5024, 9014, 2612, 1997, 17978, 11895,
+      15810, 102
     ]
   },
   { "text": "skeleton-block", "ids": [101, 13526, 1011, 3796, 102] },
   {
-    "text": "group: remocn-port, ui-primitive\nwhat: Skeleton Block. An Operator Black skeleton block built from deterministic solid loading rows.",
+    "text": "group: ui-primitive\nwhat: Skeleton Block. An Operator Black skeleton block built from deterministic solid loading rows.",
     "ids": [
-      101, 2177, 1024, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 21318, 1011, 10968, 2054, 1024,
-      13526, 3796, 1012, 2019, 6872, 2304, 13526, 3796, 2328, 2013, 28283, 25300, 10074, 5024,
-      10578, 10281, 1012, 102
+      101, 2177, 1024, 21318, 1011, 10968, 2054, 1024, 13526, 3796, 1012, 2019, 6872, 2304, 13526,
+      3796, 2328, 2013, 28283, 25300, 10074, 5024, 10578, 10281, 1012, 102
     ]
   },
   { "text": "skeleton-reveal", "ids": [101, 13526, 1011, 7487, 102] },
@@ -3288,11 +3248,11 @@
   },
   { "text": "slider", "ids": [101, 7358, 2099, 102] },
   {
-    "text": "group: control, remocn-port, slider, ui-primitive\nwhat: Slider. An accessible slider with semantic progress fill, physical thumb, and value readout",
+    "text": "group: control, slider, ui-primitive\nwhat: Slider. An accessible slider with semantic progress fill, physical thumb, and value readout",
     "ids": [
-      101, 2177, 1024, 2491, 1010, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 7358, 2099, 1010,
-      21318, 1011, 10968, 2054, 1024, 7358, 2099, 1012, 2019, 7801, 7358, 2099, 2007, 21641, 5082,
-      6039, 1010, 3558, 7639, 1010, 1998, 3643, 3191, 5833, 102
+      101, 2177, 1024, 2491, 1010, 7358, 2099, 1010, 21318, 1011, 10968, 2054, 1024, 7358, 2099,
+      1012, 2019, 7801, 7358, 2099, 2007, 21641, 5082, 6039, 1010, 3558, 7639, 1010, 1998, 3643,
+      3191, 5833, 102
     ]
   },
   { "text": "slit-scan-reveal", "ids": [101, 18036, 1011, 13594, 1011, 7487, 102] },
@@ -3310,11 +3270,10 @@
   },
   { "text": "slot-machine-roll", "ids": [101, 10453, 1011, 3698, 1011, 4897, 102] },
   {
-    "text": "group: motion-primitive, remocn-port, typography\nwhat: Slot Machine Roll. A vertical reel scrolls characters from one value to another.",
+    "text": "group: motion-primitive, typography\nwhat: Slot Machine Roll. A vertical reel scrolls characters from one value to another.",
     "ids": [
-      101, 2177, 1024, 4367, 1011, 10968, 1010, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 5939,
-      6873, 12565, 2054, 1024, 10453, 3698, 4897, 1012, 1037, 7471, 15934, 23074, 3494, 2013, 2028,
-      3643, 2000, 2178, 1012, 102
+      101, 2177, 1024, 4367, 1011, 10968, 1010, 5939, 6873, 12565, 2054, 1024, 10453, 3698, 4897,
+      1012, 1037, 7471, 15934, 23074, 3494, 2013, 2028, 3643, 2000, 2178, 1012, 102
     ]
   },
   { "text": "soft-blob-touch", "ids": [101, 3730, 1011, 1038, 4135, 2497, 1011, 3543, 102] },
@@ -3351,19 +3310,19 @@
   },
   { "text": "spatial-push", "ids": [101, 13589, 1011, 5245, 102] },
   {
-    "text": "group: remocn-port, transition-primitive\nwhat: Spatial Push. A physical depth transition that presses the old scene backward.",
+    "text": "group: transition-primitive\nwhat: Spatial Push. A physical depth transition that presses the old scene backward.",
     "ids": [
-      101, 2177, 1024, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 6653, 1011, 10968, 2054, 1024,
-      13589, 5245, 1012, 1037, 3558, 5995, 6653, 2008, 14616, 1996, 2214, 3496, 8848, 1012, 102
+      101, 2177, 1024, 6653, 1011, 10968, 2054, 1024, 13589, 5245, 1012, 1037, 3558, 5995, 6653,
+      2008, 14616, 1996, 2214, 3496, 8848, 1012, 102
     ]
   },
   { "text": "spinner", "ids": [101, 6714, 3678, 102] },
   {
-    "text": "group: loading, remocn-port, spinner, ui-primitive\nwhat: Spinner. An Operator Black finite loading spinner with a 1.5px progress ring and status label",
+    "text": "group: loading, spinner, ui-primitive\nwhat: Spinner. An Operator Black finite loading spinner with a 1.5px progress ring and status label",
     "ids": [
-      101, 2177, 1024, 10578, 1010, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 6714, 3678, 1010,
-      21318, 1011, 10968, 2054, 1024, 6714, 3678, 1012, 2019, 6872, 2304, 10713, 10578, 6714, 3678,
-      2007, 1037, 1015, 1012, 1019, 2361, 2595, 5082, 3614, 1998, 3570, 3830, 102
+      101, 2177, 1024, 10578, 1010, 6714, 3678, 1010, 21318, 1011, 10968, 2054, 1024, 6714, 3678,
+      1012, 2019, 6872, 2304, 10713, 10578, 6714, 3678, 2007, 1037, 1015, 1012, 1019, 2361, 2595,
+      5082, 3614, 1998, 3570, 3830, 102
     ]
   },
   { "text": "split-tilt-cards", "ids": [101, 3975, 1011, 17010, 1011, 5329, 102] },
@@ -3389,10 +3348,10 @@
   },
   { "text": "spotlight-card", "ids": [101, 17763, 1011, 4003, 102] },
   {
-    "text": "group: effect, remocn-port\nwhat: Spotlight Card. A card with a scripted cursor spotlight and lit border.",
+    "text": "group: effect\nwhat: Spotlight Card. A card with a scripted cursor spotlight and lit border.",
     "ids": [
-      101, 2177, 1024, 3466, 1010, 2128, 5302, 2278, 2078, 1011, 3417, 2054, 1024, 17763, 4003,
-      1012, 1037, 4003, 2007, 1037, 22892, 12731, 25301, 2099, 17763, 1998, 5507, 3675, 1012, 102
+      101, 2177, 1024, 3466, 2054, 1024, 17763, 4003, 1012, 1037, 4003, 2007, 1037, 22892, 12731,
+      25301, 2099, 17763, 1998, 5507, 3675, 1012, 102
     ]
   },
   { "text": "spring-pop", "ids": [101, 3500, 1011, 3769, 102] },
@@ -3407,11 +3366,11 @@
   },
   { "text": "spring-scale-in", "ids": [101, 3500, 1011, 4094, 1011, 1999, 102] },
   {
-    "text": "group: motion-primitive, remocn-port, typography\nwhat: Spring Scale In. Words pop in with soft overshoot scale like a physical spring settling.",
+    "text": "group: motion-primitive, typography\nwhat: Spring Scale In. Words pop in with soft overshoot scale like a physical spring settling.",
     "ids": [
-      101, 2177, 1024, 4367, 1011, 10968, 1010, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 5939,
-      6873, 12565, 2054, 1024, 3500, 4094, 1999, 1012, 2616, 3769, 1999, 2007, 3730, 15849, 23416,
-      4094, 2066, 1037, 3558, 3500, 9853, 1012, 102
+      101, 2177, 1024, 4367, 1011, 10968, 1010, 5939, 6873, 12565, 2054, 1024, 3500, 4094, 1999,
+      1012, 2616, 3769, 1999, 2007, 3730, 15849, 23416, 4094, 2066, 1037, 3558, 3500, 9853, 1012,
+      102
     ]
   },
   { "text": "spring-stack-shuffle", "ids": [101, 3500, 1011, 9991, 1011, 23046, 102] },
@@ -3450,11 +3409,11 @@
   },
   { "text": "staggered-fade-up", "ids": [101, 14648, 1011, 12985, 1011, 2039, 102] },
   {
-    "text": "group: motion-primitive, remocn-port, typography\nwhat: Staggered Fade Up. Words fade in and slide up one after another with configurable delay.",
+    "text": "group: motion-primitive, typography\nwhat: Staggered Fade Up. Words fade in and slide up one after another with configurable delay.",
     "ids": [
-      101, 2177, 1024, 4367, 1011, 10968, 1010, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 5939,
-      6873, 12565, 2054, 1024, 14648, 12985, 2039, 1012, 2616, 12985, 1999, 1998, 7358, 2039, 2028,
-      2044, 2178, 2007, 9530, 8873, 27390, 3085, 8536, 1012, 102
+      101, 2177, 1024, 4367, 1011, 10968, 1010, 5939, 6873, 12565, 2054, 1024, 14648, 12985, 2039,
+      1012, 2616, 12985, 1999, 1998, 7358, 2039, 2028, 2044, 2178, 2007, 9530, 8873, 27390, 3085,
+      8536, 1012, 102
     ]
   },
   { "text": "star-rating-fill", "ids": [101, 2732, 1011, 5790, 1011, 6039, 102] },
@@ -3482,11 +3441,11 @@
   },
   { "text": "stepper", "ids": [101, 29096, 2099, 102] },
   {
-    "text": "group: progress, remocn-port, stepper, ui-primitive\nwhat: Stepper. A horizontal stepper with numbered milestones, semantic progress, and current-step emphasis",
+    "text": "group: progress, stepper, ui-primitive\nwhat: Stepper. A horizontal stepper with numbered milestones, semantic progress, and current-step emphasis",
     "ids": [
-      101, 2177, 1024, 5082, 1010, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 29096, 2099, 1010,
-      21318, 1011, 10968, 2054, 1024, 29096, 2099, 1012, 1037, 9876, 29096, 2099, 2007, 8597, 19199,
-      2015, 1010, 21641, 5082, 1010, 1998, 2783, 1011, 3357, 7902, 102
+      101, 2177, 1024, 5082, 1010, 29096, 2099, 1010, 21318, 1011, 10968, 2054, 1024, 29096, 2099,
+      1012, 1037, 9876, 29096, 2099, 2007, 8597, 19199, 2015, 1010, 21641, 5082, 1010, 1998, 2783,
+      1011, 3357, 7902, 102
     ]
   },
   { "text": "sticky-mock-swap", "ids": [101, 15875, 1011, 12934, 1011, 19948, 102] },
@@ -3540,11 +3499,11 @@
   },
   { "text": "strikethrough-replace", "ids": [101, 4894, 2705, 22494, 5603, 1011, 5672, 102] },
   {
-    "text": "group: motion-primitive, remocn-port, typography\nwhat: Strikethrough Replace. Draw a strike line across old text, then reveal the replacement.",
+    "text": "group: motion-primitive, typography\nwhat: Strikethrough Replace. Draw a strike line across old text, then reveal the replacement.",
     "ids": [
-      101, 2177, 1024, 4367, 1011, 10968, 1010, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 5939,
-      6873, 12565, 2054, 1024, 4894, 2705, 22494, 5603, 5672, 1012, 4009, 1037, 4894, 2240, 2408,
-      2214, 3793, 1010, 2059, 7487, 1996, 6110, 1012, 102
+      101, 2177, 1024, 4367, 1011, 10968, 1010, 5939, 6873, 12565, 2054, 1024, 4894, 2705, 22494,
+      5603, 5672, 1012, 4009, 1037, 4894, 2240, 2408, 2214, 3793, 1010, 2059, 7487, 1996, 6110,
+      1012, 102
     ]
   },
   { "text": "success-check", "ids": [101, 3112, 1011, 4638, 102] },
@@ -3611,30 +3570,29 @@
   },
   { "text": "switch", "ids": [101, 6942, 102] },
   {
-    "text": "group: remocn-port, switch, toggle, ui-primitive\nwhat: Switch. A tactile switch with a physical thumb and semantic on/off treatment",
+    "text": "group: switch, toggle, ui-primitive\nwhat: Switch. A tactile switch with a physical thumb and semantic on/off treatment",
     "ids": [
-      101, 2177, 1024, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 6942, 1010, 2000, 24679, 1010,
-      21318, 1011, 10968, 2054, 1024, 6942, 1012, 1037, 11937, 6593, 9463, 6942, 2007, 1037, 3558,
-      7639, 1998, 21641, 2006, 1013, 2125, 3949, 102
+      101, 2177, 1024, 6942, 1010, 2000, 24679, 1010, 21318, 1011, 10968, 2054, 1024, 6942, 1012,
+      1037, 11937, 6593, 9463, 6942, 2007, 1037, 3558, 7639, 1998, 21641, 2006, 1013, 2125, 3949,
+      102
     ]
   },
   { "text": "table", "ids": [101, 2795, 102] },
   {
-    "text": "group: data, remocn-port, table, ui-primitive\nwhat: Table. A compact structured-data table with machined row rules, semantic statuses, and tabular time values",
+    "text": "group: data, table, ui-primitive\nwhat: Table. A compact structured-data table with machined row rules, semantic statuses, and tabular time values",
     "ids": [
-      101, 2177, 1024, 2951, 1010, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 2795, 1010, 21318,
-      1011, 10968, 2054, 1024, 2795, 1012, 1037, 9233, 14336, 1011, 2951, 2795, 2007, 3698, 2094,
-      5216, 3513, 1010, 21641, 3570, 2229, 1010, 1998, 21628, 7934, 2051, 5300, 102
+      101, 2177, 1024, 2951, 1010, 2795, 1010, 21318, 1011, 10968, 2054, 1024, 2795, 1012, 1037,
+      9233, 14336, 1011, 2951, 2795, 2007, 3698, 2094, 5216, 3513, 1010, 21641, 3570, 2229, 1010,
+      1998, 21628, 7934, 2051, 5300, 102
     ]
   },
   { "text": "tabs", "ids": [101, 21628, 2015, 102] },
   {
-    "text": "group: navigation, remocn-port, tabs, ui-primitive\nwhat: Tabs. A minimal tab primitive with an inset mint selection edge, open content hierarchy, and a seek-safe indicator",
+    "text": "group: navigation, tabs, ui-primitive\nwhat: Tabs. A minimal tab primitive with an inset mint selection edge, open content hierarchy, and a seek-safe indicator",
     "ids": [
-      101, 2177, 1024, 9163, 1010, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 21628, 2015, 1010,
-      21318, 1011, 10968, 2054, 1024, 21628, 2015, 1012, 1037, 10124, 21628, 10968, 2007, 2019,
-      16021, 3388, 12927, 4989, 3341, 1010, 2330, 4180, 12571, 1010, 1998, 1037, 6148, 1011, 3647,
-      17245, 102
+      101, 2177, 1024, 9163, 1010, 21628, 2015, 1010, 21318, 1011, 10968, 2054, 1024, 21628, 2015,
+      1012, 1037, 10124, 21628, 10968, 2007, 2019, 16021, 3388, 12927, 4989, 3341, 1010, 2330, 4180,
+      12571, 1010, 1998, 1037, 6148, 1011, 3647, 17245, 102
     ]
   },
   { "text": "tabs-slide-indicator", "ids": [101, 21628, 2015, 1011, 7358, 1011, 17245, 102] },
@@ -3661,10 +3619,10 @@
   },
   { "text": "terminal-simulator", "ids": [101, 5536, 1011, 25837, 102] },
   {
-    "text": "group: code-animation, remocn-port\nwhat: Terminal Simulator. A terminal window types commands and streams log output.",
+    "text": "group: code-animation\nwhat: Terminal Simulator. A terminal window types commands and streams log output.",
     "ids": [
-      101, 2177, 1024, 3642, 1011, 7284, 1010, 2128, 5302, 2278, 2078, 1011, 3417, 2054, 1024, 5536,
-      25837, 1012, 1037, 5536, 3332, 4127, 10954, 1998, 9199, 8833, 6434, 1012, 102
+      101, 2177, 1024, 3642, 1011, 7284, 2054, 1024, 5536, 25837, 1012, 1037, 5536, 3332, 4127,
+      10954, 1998, 9199, 8833, 6434, 1012, 102
     ]
   },
   {
@@ -3672,10 +3630,10 @@
     "ids": [101, 5536, 1011, 2000, 1011, 16602, 1011, 21296, 102]
   },
   {
-    "text": "group: remocn-port, showcase\nwhat: Terminal to Browser Deploy. Terminal deploy logs hand off into a live browser preview.",
+    "text": "group: showcase\nwhat: Terminal to Browser Deploy. Terminal deploy logs hand off into a live browser preview.",
     "ids": [
-      101, 2177, 1024, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 13398, 2054, 1024, 5536, 2000,
-      16602, 21296, 1012, 5536, 21296, 15664, 2192, 2125, 2046, 1037, 2444, 16602, 19236, 1012, 102
+      101, 2177, 1024, 13398, 2054, 1024, 5536, 2000, 16602, 21296, 1012, 5536, 21296, 15664, 2192,
+      2125, 2046, 1037, 2444, 16602, 19236, 1012, 102
     ]
   },
   { "text": "testimonial-card", "ids": [101, 3231, 16339, 6200, 2140, 1011, 4003, 102] },
@@ -3737,11 +3695,11 @@
   },
   { "text": "textarea", "ids": [101, 3793, 12069, 2050, 102] },
   {
-    "text": "group: field, remocn-port, textarea, ui-primitive\nwhat: Textarea. A resilient multiline field with a precise focus treatment and readable copy",
+    "text": "group: field, textarea, ui-primitive\nwhat: Textarea. A resilient multiline field with a precise focus treatment and readable copy",
     "ids": [
-      101, 2177, 1024, 2492, 1010, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 3793, 12069, 2050,
-      1010, 21318, 1011, 10968, 2054, 1024, 3793, 12069, 2050, 1012, 1037, 24501, 18622, 4765, 4800,
-      4179, 2492, 2007, 1037, 10480, 3579, 3949, 1998, 3191, 3085, 6100, 102
+      101, 2177, 1024, 2492, 1010, 3793, 12069, 2050, 1010, 21318, 1011, 10968, 2054, 1024, 3793,
+      12069, 2050, 1012, 1037, 24501, 18622, 4765, 4800, 4179, 2492, 2007, 1037, 10480, 3579, 3949,
+      1998, 3191, 3085, 6100, 102
     ]
   },
   { "text": "texture-mask-text", "ids": [101, 14902, 1011, 7308, 1011, 3793, 102] },
@@ -3847,20 +3805,20 @@
   },
   { "text": "toast", "ids": [101, 15174, 102] },
   {
-    "text": "group: notification, remocn-port, toast, ui-primitive\nwhat: Toast. An Operator Black toast with a semantic success check, progress rail, and stack-origin motion",
+    "text": "group: notification, toast, ui-primitive\nwhat: Toast. An Operator Black toast with a semantic success check, progress rail, and stack-origin motion",
     "ids": [
-      101, 2177, 1024, 26828, 1010, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 15174, 1010, 21318,
-      1011, 10968, 2054, 1024, 15174, 1012, 2019, 6872, 2304, 15174, 2007, 1037, 21641, 3112, 4638,
-      1010, 5082, 4334, 1010, 1998, 9991, 1011, 4761, 4367, 102
+      101, 2177, 1024, 26828, 1010, 15174, 1010, 21318, 1011, 10968, 2054, 1024, 15174, 1012, 2019,
+      6872, 2304, 15174, 2007, 1037, 21641, 3112, 4638, 1010, 5082, 4334, 1010, 1998, 9991, 1011,
+      4761, 4367, 102
     ]
   },
   { "text": "toggle", "ids": [101, 2000, 24679, 102] },
   {
-    "text": "group: control, remocn-port, toggle, ui-primitive\nwhat: Toggle. A tactile toggle button with distinct pressed and unpressed states",
+    "text": "group: control, toggle, ui-primitive\nwhat: Toggle. A tactile toggle button with distinct pressed and unpressed states",
     "ids": [
-      101, 2177, 1024, 2491, 1010, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 2000, 24679, 1010,
-      21318, 1011, 10968, 2054, 1024, 2000, 24679, 1012, 1037, 11937, 6593, 9463, 2000, 24679, 6462,
-      2007, 5664, 4508, 1998, 4895, 19811, 2163, 102
+      101, 2177, 1024, 2491, 1010, 2000, 24679, 1010, 21318, 1011, 10968, 2054, 1024, 2000, 24679,
+      1012, 1037, 11937, 6593, 9463, 2000, 24679, 6462, 2007, 5664, 4508, 1998, 4895, 19811, 2163,
+      102
     ]
   },
   { "text": "toggle-flip", "ids": [101, 2000, 24679, 1011, 11238, 102] },
@@ -3877,38 +3835,36 @@
   },
   { "text": "toggle-group", "ids": [101, 2000, 24679, 1011, 2177, 102] },
   {
-    "text": "group: control, remocn-port, toggle-group, ui-primitive\nwhat: Toggle Group. A segmented toggle group with a recessed sliding selection indicator",
+    "text": "group: control, toggle-group, ui-primitive\nwhat: Toggle Group. A segmented toggle group with a recessed sliding selection indicator",
     "ids": [
-      101, 2177, 1024, 2491, 1010, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 2000, 24679, 1011,
-      2177, 1010, 21318, 1011, 10968, 2054, 1024, 2000, 24679, 2177, 1012, 1037, 6903, 2098, 2000,
-      24679, 2177, 2007, 1037, 28290, 2098, 8058, 4989, 17245, 102
+      101, 2177, 1024, 2491, 1010, 2000, 24679, 1011, 2177, 1010, 21318, 1011, 10968, 2054, 1024,
+      2000, 24679, 2177, 1012, 1037, 6903, 2098, 2000, 24679, 2177, 2007, 1037, 28290, 2098, 8058,
+      4989, 17245, 102
     ]
   },
   { "text": "tool-menu-slide-in", "ids": [101, 6994, 1011, 12183, 1011, 7358, 1011, 1999, 102] },
   {
-    "text": "group: remocn-port, transition-primitive\nwhat: Tool Menu Slide In. A tool menu enters with short-axis slide and icon stagger.",
+    "text": "group: transition-primitive\nwhat: Tool Menu Slide In. A tool menu enters with short-axis slide and icon stagger.",
     "ids": [
-      101, 2177, 1024, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 6653, 1011, 10968, 2054, 1024,
-      6994, 12183, 7358, 1999, 1012, 1037, 6994, 12183, 8039, 2007, 2460, 1011, 8123, 7358, 1998,
-      12696, 2358, 27609, 1012, 102
+      101, 2177, 1024, 6653, 1011, 10968, 2054, 1024, 6994, 12183, 7358, 1999, 1012, 1037, 6994,
+      12183, 8039, 2007, 2460, 1011, 8123, 7358, 1998, 12696, 2358, 27609, 1012, 102
     ]
   },
   { "text": "tooltip", "ids": [101, 6994, 25101, 102] },
   {
-    "text": "group: overlay, remocn-port, tooltip, ui-primitive\nwhat: Tooltip. An Operator Black tooltip with a technical trigger icon and origin-aware Soft Optical reveal",
+    "text": "group: overlay, tooltip, ui-primitive\nwhat: Tooltip. An Operator Black tooltip with a technical trigger icon and origin-aware Soft Optical reveal",
     "ids": [
-      101, 2177, 1024, 2058, 8485, 1010, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 6994, 25101,
-      1010, 21318, 1011, 10968, 2054, 1024, 6994, 25101, 1012, 2019, 6872, 2304, 6994, 25101, 2007,
-      1037, 4087, 9495, 12696, 1998, 4761, 1011, 5204, 3730, 9380, 7487, 102
+      101, 2177, 1024, 2058, 8485, 1010, 6994, 25101, 1010, 21318, 1011, 10968, 2054, 1024, 6994,
+      25101, 1012, 2019, 6872, 2304, 6994, 25101, 2007, 1037, 4087, 9495, 12696, 1998, 4761, 1011,
+      5204, 3730, 9380, 7487, 102
     ]
   },
   { "text": "top-down-letters", "ids": [101, 2327, 1011, 2091, 1011, 4144, 102] },
   {
-    "text": "group: motion-primitive, remocn-port, typography\nwhat: Top-Down Letters. Letters descend from above in a pronounced staircase with zero blur.",
+    "text": "group: motion-primitive, typography\nwhat: Top-Down Letters. Letters descend from above in a pronounced staircase with zero blur.",
     "ids": [
-      101, 2177, 1024, 4367, 1011, 10968, 1010, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 5939,
-      6873, 12565, 2054, 1024, 2327, 1011, 2091, 4144, 1012, 4144, 18855, 2013, 2682, 1999, 1037,
-      8793, 10714, 2007, 5717, 14819, 1012, 102
+      101, 2177, 1024, 4367, 1011, 10968, 1010, 5939, 6873, 12565, 2054, 1024, 2327, 1011, 2091,
+      4144, 1012, 4144, 18855, 2013, 2682, 1999, 1037, 8793, 10714, 2007, 5717, 14819, 1012, 102
     ]
   },
   { "text": "touch-indicator", "ids": [101, 3543, 1011, 17245, 102] },
@@ -4082,11 +4038,11 @@
   },
   { "text": "typewriter", "ids": [101, 2828, 15994, 102] },
   {
-    "text": "group: motion-primitive, remocn-port, typography\nwhat: Typewriter. Character-by-character text reveal with a deterministic blinking cursor.",
+    "text": "group: motion-primitive, typography\nwhat: Typewriter. Character-by-character text reveal with a deterministic blinking cursor.",
     "ids": [
-      101, 2177, 1024, 4367, 1011, 10968, 1010, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 5939,
-      6873, 12565, 2054, 1024, 2828, 15994, 1012, 2839, 1011, 2011, 1011, 2839, 3793, 7487, 2007,
-      1037, 28283, 25300, 10074, 15997, 12731, 25301, 2099, 1012, 102
+      101, 2177, 1024, 4367, 1011, 10968, 1010, 5939, 6873, 12565, 2054, 1024, 2828, 15994, 1012,
+      2839, 1011, 2011, 1011, 2839, 3793, 7487, 2007, 1037, 28283, 25300, 10074, 15997, 12731,
+      25301, 2099, 1012, 102
     ]
   },
   { "text": "ui-3d-reveal", "ids": [101, 21318, 1011, 7605, 1011, 7487, 102] },
@@ -4363,20 +4319,18 @@
   },
   { "text": "x-follow-card", "ids": [101, 1060, 1011, 3582, 1011, 4003, 102] },
   {
-    "text": "group: remocn-port, social-overlay\nwhat: X Follow Card. A social follow card with avatar, handle, and follower motion.",
+    "text": "group: social-overlay\nwhat: X Follow Card. A social follow card with avatar, handle, and follower motion.",
     "ids": [
-      101, 2177, 1024, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 2591, 1011, 2058, 8485, 2054, 1024,
-      1060, 3582, 4003, 1012, 1037, 2591, 3582, 4003, 2007, 22128, 1010, 5047, 1010, 1998, 22399,
-      4367, 1012, 102
+      101, 2177, 1024, 2591, 1011, 2058, 8485, 2054, 1024, 1060, 3582, 4003, 1012, 1037, 2591, 3582,
+      4003, 2007, 22128, 1010, 5047, 1010, 1998, 22399, 4367, 1012, 102
     ]
   },
   { "text": "x-followers-overview", "ids": [101, 1060, 1011, 8771, 1011, 19184, 102] },
   {
-    "text": "group: remocn-port, social-overlay\nwhat: X Followers Overview. A social analytics card with count-up and audience pills.",
+    "text": "group: social-overlay\nwhat: X Followers Overview. A social analytics card with count-up and audience pills.",
     "ids": [
-      101, 2177, 1024, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 2591, 1011, 2058, 8485, 2054, 1024,
-      1060, 8771, 19184, 1012, 1037, 2591, 25095, 4003, 2007, 4175, 1011, 2039, 1998, 4378, 15345,
-      1012, 102
+      101, 2177, 1024, 2591, 1011, 2058, 8485, 2054, 1024, 1060, 8771, 19184, 1012, 1037, 2591,
+      25095, 4003, 2007, 4175, 1011, 2039, 1998, 4378, 15345, 1012, 102
     ]
   },
   { "text": "x-post", "ids": [101, 1060, 1011, 2695, 102] },
@@ -4409,11 +4363,10 @@
   },
   { "text": "zoom-through-transition", "ids": [101, 24095, 1011, 2083, 1011, 6653, 102] },
   {
-    "text": "group: remocn-port, transition-primitive\nwhat: Zoom Through Transition. A transition that zooms through a focal card into the next scene.",
+    "text": "group: transition-primitive\nwhat: Zoom Through Transition. A transition that zooms through a focal card into the next scene.",
     "ids": [
-      101, 2177, 1024, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 6653, 1011, 10968, 2054, 1024,
-      24095, 2083, 6653, 1012, 1037, 6653, 2008, 24095, 2015, 2083, 1037, 15918, 4003, 2046, 1996,
-      2279, 3496, 1012, 102
+      101, 2177, 1024, 6653, 1011, 10968, 2054, 1024, 24095, 2083, 6653, 1012, 1037, 6653, 2008,
+      24095, 2015, 2083, 1037, 15918, 4003, 2046, 1996, 2279, 3496, 1012, 102
     ]
   }
 ]
diff --git a/registry/catalog-artifact/local-vectors.bin b/registry/catalog-artifact/local-vectors.bin
index 4cf2404344..4291a04778 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 62c8a18237..ceb3077743 100644
--- a/registry/catalog-artifact/local-vectors.json
+++ b/registry/catalog-artifact/local-vectors.json
@@ -2,7 +2,7 @@
   "model": "bge-small-en-v1.5",
   "modelRevision": "ea104dacec62c0de699686887e3f920caeb4f3e3",
   "dimensions": 384,
-  "revision": "6e03561a0082cf676faac12c7d566fa2846ac0593be183b2fca4543e51aff1ee",
+  "revision": "6e83353888f7e2114f5195215d8b0cdf8794f925232ff8811428ac4d3979a7ba",
   "names": [
     "ai-chat-reveal",
     "ai-generation-canvas",
diff --git a/registry/components/ai-generation-canvas/ai-generation-canvas.html b/registry/components/ai-generation-canvas/ai-generation-canvas.html
index 6ae7ce64ad..60c467a0e8 100644
--- a/registry/components/ai-generation-canvas/ai-generation-canvas.html
+++ b/registry/components/ai-generation-canvas/ai-generation-canvas.html
@@ -1,11 +1,11 @@
 <!--
-  AI Generation Canvas - remocn component ported to HyperFrames authoring format.
+  AI Generation Canvas - catalog component for HyperFrames.
 
   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="hf-catalog-ai-generation-canvas">
   <div class="panel prompt">
     <h3>AI Generation Canvas</h3>
     <p>A prompt composer expands into a generated dashboard preview.</p>
@@ -21,7 +21,7 @@ <h3>AI Generation Canvas</h3>
 </div>
 
 <style>
-  .hf-remocn-ai-generation-canvas {
+  .hf-catalog-ai-generation-canvas {
     --hf-accent: var(--accent, #18181b);
     --hf-ink: #111827;
     --hf-muted: #6b7280;
@@ -29,7 +29,7 @@ <h3>AI Generation Canvas</h3>
     color: var(--hf-ink);
     font-family: Inter, system-ui, sans-serif;
   }
-  .hf-remocn-ai-generation-canvas {
+  .hf-catalog-ai-generation-canvas {
     width: 820px;
     min-height: 460px;
     border-radius: 34px;
@@ -41,19 +41,19 @@ <h3>AI Generation Canvas</h3>
     gap: 22px;
     overflow: hidden;
   }
-  .hf-remocn-ai-generation-canvas .panel {
+  .hf-catalog-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 {
+  .hf-catalog-ai-generation-canvas .prompt {
     display: grid;
     gap: 12px;
     align-content: start;
   }
-  .hf-remocn-ai-generation-canvas .pill {
+  .hf-catalog-ai-generation-canvas .pill {
     height: 42px;
     border-radius: 999px;
     background: #111827;
@@ -64,11 +64,11 @@ <h3>AI Generation Canvas</h3>
     font-weight: 800;
     transform: translateX(var(--hf-pill-x, 0px));
   }
-  .hf-remocn-ai-generation-canvas .preview {
+  .hf-catalog-ai-generation-canvas .preview {
     display: grid;
     gap: 14px;
   }
-  .hf-remocn-ai-generation-canvas .card {
+  .hf-catalog-ai-generation-canvas .card {
     min-height: 78px;
     border-radius: 18px;
     background: #fff;
@@ -77,12 +77,12 @@ <h3>AI Generation Canvas</h3>
       scale(var(--hf-card-scale, 1));
     opacity: var(--hf-card-opacity, 1);
   }
-  .hf-remocn-ai-generation-canvas h3 {
+  .hf-catalog-ai-generation-canvas h3 {
     margin: 0 0 14px;
     font-size: 32px;
     letter-spacing: -0.04em;
   }
-  .hf-remocn-ai-generation-canvas p {
+  .hf-catalog-ai-generation-canvas p {
     margin: 0;
     color: #475569;
   }
@@ -90,5 +90,5 @@ <h3>AI Generation Canvas</h3>
 
 <!--
   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);
+  tl.fromTo('.hf-catalog-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-catalog-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
index c10f732343..9796b1a956 100644
--- a/registry/components/ai-generation-canvas/demo.html
+++ b/registry/components/ai-generation-canvas/demo.html
@@ -31,7 +31,7 @@
         /* ponytail: scale on wrapper (not GSAP target) to fill ~65% of 1920×1080 */
         transform: scale(1.52);
       }
-      .hf-remocn-ai-generation-canvas {
+      .hf-catalog-ai-generation-canvas {
         --hf-accent: var(--accent, #18181b);
         --hf-ink: #111827;
         --hf-muted: #6b7280;
@@ -39,7 +39,7 @@
         color: var(--hf-ink);
         font-family: Inter, system-ui, sans-serif;
       }
-      .hf-remocn-ai-generation-canvas {
+      .hf-catalog-ai-generation-canvas {
         width: 820px;
         min-height: 460px;
         border-radius: 34px;
@@ -51,19 +51,19 @@
         gap: 22px;
         overflow: hidden;
       }
-      .hf-remocn-ai-generation-canvas .panel {
+      .hf-catalog-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 {
+      .hf-catalog-ai-generation-canvas .prompt {
         display: grid;
         gap: 12px;
         align-content: start;
       }
-      .hf-remocn-ai-generation-canvas .pill {
+      .hf-catalog-ai-generation-canvas .pill {
         height: 42px;
         border-radius: 999px;
         background: #111827;
@@ -74,11 +74,11 @@
         font-weight: 800;
         transform: translateX(var(--hf-pill-x, 0px));
       }
-      .hf-remocn-ai-generation-canvas .preview {
+      .hf-catalog-ai-generation-canvas .preview {
         display: grid;
         gap: 14px;
       }
-      .hf-remocn-ai-generation-canvas .card {
+      .hf-catalog-ai-generation-canvas .card {
         min-height: 78px;
         border-radius: 18px;
         background: #fff;
@@ -92,34 +92,34 @@
         gap: 10px;
       }
       /* skeleton bars that make the dashboard cards readable as a thumbnail */
-      .hf-remocn-ai-generation-canvas .card-label {
+      .hf-catalog-ai-generation-canvas .card-label {
         height: 10px;
         border-radius: 6px;
         background: #e4e4e7;
         width: 55%;
       }
-      .hf-remocn-ai-generation-canvas .card-bar {
+      .hf-catalog-ai-generation-canvas .card-bar {
         height: 8px;
         border-radius: 6px;
         background: #f4f4f5;
         width: 85%;
       }
-      .hf-remocn-ai-generation-canvas .card-bar.short {
+      .hf-catalog-ai-generation-canvas .card-bar.short {
         width: 60%;
       }
-      .hf-remocn-ai-generation-canvas .card-accent {
+      .hf-catalog-ai-generation-canvas .card-accent {
         height: 28px;
         border-radius: 8px;
         background: #d4d4d8;
         width: 100%;
         margin-top: 2px;
       }
-      .hf-remocn-ai-generation-canvas h3 {
+      .hf-catalog-ai-generation-canvas h3 {
         margin: 0 0 14px;
         font-size: 32px;
         letter-spacing: -0.04em;
       }
-      .hf-remocn-ai-generation-canvas p {
+      .hf-catalog-ai-generation-canvas p {
         margin: 0;
         color: #71717a;
       }
@@ -135,7 +135,7 @@
       data-duration="5"
     >
       <div class="demo-frame">
-        <div class="hf-remocn-ai-generation-canvas">
+        <div class="hf-catalog-ai-generation-canvas">
           <div class="panel prompt">
             <h3>AI Generation Canvas</h3>
             <p>A prompt composer expands into a generated dashboard preview.</p>
@@ -165,13 +165,13 @@ <h3>AI Generation Canvas</h3>
         const tl = gsap.timeline({ paused: true });
         const startTime = 0.5;
         tl.fromTo(
-          ".hf-remocn-ai-generation-canvas .pill",
+          ".hf-catalog-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-catalog-ai-generation-canvas .card",
           { "--hf-card-y": "28px", "--hf-card-scale": 0.96, "--hf-card-opacity": 0 },
           {
             "--hf-card-y": "0px",
diff --git a/registry/components/ai-generation-canvas/registry-item.json b/registry/components/ai-generation-canvas/registry-item.json
index bf7717de64..e5f40e6d9e 100644
--- a/registry/components/ai-generation-canvas/registry-item.json
+++ b/registry/components/ai-generation-canvas/registry-item.json
@@ -4,7 +4,7 @@
   "type": "hyperframes:component",
   "title": "AI Generation Canvas",
   "description": "A prompt composer expands into a generated dashboard preview.",
-  "tags": ["showcase", "remocn-port", "ai"],
+  "tags": ["showcase", "ai"],
   "files": [
     {
       "path": "ai-generation-canvas.html",
diff --git a/registry/components/ai-prompt-flow/ai-prompt-flow.html b/registry/components/ai-prompt-flow/ai-prompt-flow.html
index fca8f75ef0..02e1f29466 100644
--- a/registry/components/ai-prompt-flow/ai-prompt-flow.html
+++ b/registry/components/ai-prompt-flow/ai-prompt-flow.html
@@ -1,5 +1,5 @@
 <!--
-  AI Prompt Flow - Remocn-inspired composed UI flow for HyperFrames.
+  AI Prompt Flow - 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.
diff --git a/registry/components/ai-prompt-flow/registry-item.json b/registry/components/ai-prompt-flow/registry-item.json
index 100fe06f68..aca0ac56fe 100644
--- a/registry/components/ai-prompt-flow/registry-item.json
+++ b/registry/components/ai-prompt-flow/registry-item.json
@@ -4,7 +4,7 @@
   "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"],
+  "tags": ["ui-flow", "ai", "prompt"],
   "files": [
     {
       "path": "ai-prompt-flow.html",
diff --git a/registry/components/animated-bar-chart/animated-bar-chart.html b/registry/components/animated-bar-chart/animated-bar-chart.html
index 3b68f46a4c..71b5b93ac6 100644
--- a/registry/components/animated-bar-chart/animated-bar-chart.html
+++ b/registry/components/animated-bar-chart/animated-bar-chart.html
@@ -1,11 +1,11 @@
 <!--
-  Animated Bar Chart - remocn component ported to HyperFrames authoring format.
+  Animated Bar Chart - catalog component for HyperFrames.
 
   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">
+<div class="hf-catalog-animated-bar-chart">
   <header>
     <div>
       <h3>Animated Bar Chart</h3>
@@ -31,7 +31,7 @@ <h3>Animated Bar Chart</h3>
 </div>
 
 <style>
-  .hf-remocn-animated-bar-chart {
+  .hf-catalog-animated-bar-chart {
     --hf-accent: var(--accent, #111827);
     --hf-ink: #111827;
     --hf-l1: rgba(17, 24, 39, 0.72);
@@ -44,7 +44,7 @@ <h3>Animated Bar Chart</h3>
     color: var(--hf-ink);
     font-family: Inter, system-ui, sans-serif;
   }
-  .hf-remocn-animated-bar-chart {
+  .hf-catalog-animated-bar-chart {
     width: 760px;
     min-height: 420px;
     border-radius: 28px;
@@ -54,38 +54,38 @@ <h3>Animated Bar Chart</h3>
     display: grid;
     gap: 22px;
   }
-  .hf-remocn-animated-bar-chart header {
+  .hf-catalog-animated-bar-chart header {
     display: flex;
     justify-content: space-between;
     align-items: end;
   }
-  .hf-remocn-animated-bar-chart h3 {
+  .hf-catalog-animated-bar-chart h3 {
     margin: 0;
     font-size: 34px;
     letter-spacing: -0.04em;
   }
-  .hf-remocn-animated-bar-chart strong {
+  .hf-catalog-animated-bar-chart strong {
     font-size: 54px;
     letter-spacing: -0.06em;
   }
-  .hf-remocn-animated-bar-chart .bars {
+  .hf-catalog-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 {
+  .hf-catalog-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 {
+  .hf-catalog-animated-bar-chart svg {
     width: 100%;
     height: 210px;
     overflow: visible;
   }
-  .hf-remocn-animated-bar-chart path {
+  .hf-catalog-animated-bar-chart path {
     color: var(--hf-l2);
     stroke-dasharray: 900;
     stroke-dashoffset: var(--hf-dash, 0);
@@ -94,5 +94,5 @@ <h3>Animated Bar Chart</h3>
 
 <!--
   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);
+  tl.fromTo('.hf-catalog-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
index 0a9429d89b..16e60148f2 100644
--- a/registry/components/animated-bar-chart/demo.html
+++ b/registry/components/animated-bar-chart/demo.html
@@ -31,7 +31,7 @@
         transform: scale(1.6);
         transform-origin: center center;
       }
-      .hf-remocn-animated-bar-chart {
+      .hf-catalog-animated-bar-chart {
         --hf-accent: var(--accent, #111827);
         --hf-ink: #111827;
         --hf-l1: rgba(17, 24, 39, 0.72);
@@ -44,7 +44,7 @@
         color: var(--hf-ink);
         font-family: Inter, system-ui, sans-serif;
       }
-      .hf-remocn-animated-bar-chart {
+      .hf-catalog-animated-bar-chart {
         width: 760px;
         min-height: 420px;
         border-radius: 28px;
@@ -54,57 +54,57 @@
         display: grid;
         gap: 22px;
       }
-      .hf-remocn-animated-bar-chart header {
+      .hf-catalog-animated-bar-chart header {
         display: flex;
         justify-content: space-between;
         align-items: end;
       }
-      .hf-remocn-animated-bar-chart h3 {
+      .hf-catalog-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 {
+      .hf-catalog-animated-bar-chart header p {
         margin: 6px 0 0;
         font-size: 16px;
         color: #6b7280;
         font-weight: 400;
       }
-      .hf-remocn-animated-bar-chart strong {
+      .hf-catalog-animated-bar-chart strong {
         font-size: 54px;
         letter-spacing: -0.06em;
         color: var(--hf-accent);
         font-weight: 700;
       }
-      .hf-remocn-animated-bar-chart .bars {
+      .hf-catalog-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 {
+      .hf-catalog-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 {
+      .hf-catalog-animated-bar-chart .chart-footer {
         display: grid;
         gap: 6px;
       }
-      .hf-remocn-animated-bar-chart svg {
+      .hf-catalog-animated-bar-chart svg {
         width: 100%;
         height: 180px;
         overflow: visible;
       }
-      .hf-remocn-animated-bar-chart path {
+      .hf-catalog-animated-bar-chart path {
         color: var(--hf-l2);
         stroke-dasharray: 900;
         stroke-dashoffset: var(--hf-dash, 0);
       }
-      .hf-remocn-animated-bar-chart .bar-labels {
+      .hf-catalog-animated-bar-chart .bar-labels {
         display: grid;
         grid-template-columns: repeat(7, 1fr);
         text-align: center;
@@ -125,7 +125,7 @@
       data-duration="5"
     >
       <div class="demo-frame">
-        <div class="hf-remocn-animated-bar-chart">
+        <div class="hf-catalog-animated-bar-chart">
           <header>
             <div>
               <h3>Animated Bar Chart</h3>
@@ -162,7 +162,7 @@ <h3>Animated Bar Chart</h3>
         const tl = gsap.timeline({ paused: true });
         const startTime = 0.5;
         tl.fromTo(
-          ".hf-remocn-animated-bar-chart",
+          ".hf-catalog-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/registry-item.json b/registry/components/animated-bar-chart/registry-item.json
index a5a22ca6c7..88073a825d 100644
--- a/registry/components/animated-bar-chart/registry-item.json
+++ b/registry/components/animated-bar-chart/registry-item.json
@@ -4,7 +4,7 @@
   "type": "hyperframes:component",
   "title": "Animated Bar Chart",
   "description": "A compact data card with deterministic bar growth and value callouts.",
-  "tags": ["data", "remocn-port"],
+  "tags": ["data"],
   "files": [
     {
       "path": "animated-bar-chart.html",
diff --git a/registry/components/blur-in/registry-item.json b/registry/components/blur-in/registry-item.json
index 77dc982b61..52669075a0 100644
--- a/registry/components/blur-in/registry-item.json
+++ b/registry/components/blur-in/registry-item.json
@@ -4,7 +4,7 @@
   "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"],
+  "tags": ["video-primitive", "blur-in", "text-effect"],
   "files": [
     {
       "path": "blur-in.html",
diff --git a/registry/components/blur-out-up/blur-out-up.html b/registry/components/blur-out-up/blur-out-up.html
index 970e47bb4a..9efa840758 100644
--- a/registry/components/blur-out-up/blur-out-up.html
+++ b/registry/components/blur-out-up/blur-out-up.html
@@ -1,5 +1,5 @@
 <!--
-  Blur Out Up - remocn typography primitive for HyperFrames.
+  Blur Out Up - 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.
@@ -25,7 +25,7 @@
 -->
 
 <div
-  class="hf-remocn-blur-out-up"
+  class="hf-catalog-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" }] },
@@ -37,19 +37,19 @@
 </div>
 
 <style>
-  .hf-remocn-blur-out-up {
+  .hf-catalog-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 {
+  .hf-catalog-blur-out-up {
     display: inline-flex;
     gap: 12px;
     font-size: 56px;
     line-height: 1;
   }
-  .hf-remocn-blur-out-up span {
+  .hf-catalog-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)),
@@ -94,7 +94,7 @@
     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");
+    var roots = document.querySelectorAll(".hf-catalog-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));
@@ -106,5 +106,5 @@
 
 <!--
   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);
+  tl.fromTo('.hf-catalog-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
index 479502d45c..907bbd64cd 100644
--- a/registry/components/blur-out-up/demo.html
+++ b/registry/components/blur-out-up/demo.html
@@ -33,19 +33,19 @@
         /* ponytail: scale wrapper — GSAP targets spans inside, not this element */
         transform: scale(2.6);
       }
-      .hf-remocn-blur-out-up {
+      .hf-catalog-blur-out-up {
         color: #18181b;
         font-family: Inter, system-ui, sans-serif;
         font-weight: 900;
         letter-spacing: -0.04em;
       }
-      .hf-remocn-blur-out-up {
+      .hf-catalog-blur-out-up {
         display: inline-flex;
         gap: 12px;
         font-size: 56px;
         line-height: 1;
       }
-      .hf-remocn-blur-out-up span {
+      .hf-catalog-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));
@@ -64,13 +64,13 @@
       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 class="hf-catalog-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",
+          ".hf-catalog-blur-out-up span",
           { opacity: 0, "--hf-word-y": "22px", "--hf-word-scale": 0.92, "--hf-word-blur": "5px" },
           {
             opacity: 1,
diff --git a/registry/components/blur-out-up/registry-item.json b/registry/components/blur-out-up/registry-item.json
index 979d57392d..4260de65f1 100644
--- a/registry/components/blur-out-up/registry-item.json
+++ b/registry/components/blur-out-up/registry-item.json
@@ -4,7 +4,7 @@
   "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"],
+  "tags": ["motion-primitive", "typography"],
   "files": [
     {
       "path": "blur-out-up.html",
diff --git a/registry/components/checkout-flow/checkout-flow.html b/registry/components/checkout-flow/checkout-flow.html
index 242c4bac65..40be67b609 100644
--- a/registry/components/checkout-flow/checkout-flow.html
+++ b/registry/components/checkout-flow/checkout-flow.html
@@ -1,5 +1,5 @@
 <!--
-  Checkout Flow - Remocn-inspired composed UI flow for HyperFrames.
+  Checkout Flow - 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.
diff --git a/registry/components/checkout-flow/registry-item.json b/registry/components/checkout-flow/registry-item.json
index 7b245e8740..095ebd2828 100644
--- a/registry/components/checkout-flow/registry-item.json
+++ b/registry/components/checkout-flow/registry-item.json
@@ -4,7 +4,7 @@
   "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"],
+  "tags": ["ui-flow", "checkout", "commerce"],
   "files": [
     {
       "path": "checkout-flow.html",
diff --git a/registry/components/chromatic-aberration-wipe/chromatic-aberration-wipe.html b/registry/components/chromatic-aberration-wipe/chromatic-aberration-wipe.html
index d0545aace4..84c0c240e0 100644
--- a/registry/components/chromatic-aberration-wipe/chromatic-aberration-wipe.html
+++ b/registry/components/chromatic-aberration-wipe/chromatic-aberration-wipe.html
@@ -1,5 +1,5 @@
 <!--
-  Chromatic Aberration Wipe - remocn component ported to HyperFrames authoring format.
+  Chromatic Aberration Wipe - catalog component for HyperFrames.
 
   Paste the markup and CSS into a composition. Drive the timeline integration
   from a paused GSAP timeline so renders remain deterministic.
@@ -26,7 +26,7 @@
 -->
 
 <div
-  class="hf-remocn-chromatic-aberration-wipe"
+  class="hf-catalog-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" }] },
@@ -40,7 +40,7 @@
 </div>
 
 <style>
-  .hf-remocn-chromatic-aberration-wipe {
+  .hf-catalog-chromatic-aberration-wipe {
     --hf-accent: #2563eb;
     --hf-ink: #111827;
     --hf-muted: #6b7280;
@@ -48,7 +48,7 @@
     color: var(--hf-ink);
     font-family: Inter, system-ui, sans-serif;
   }
-  .hf-remocn-chromatic-aberration-wipe {
+  .hf-catalog-chromatic-aberration-wipe {
     position: relative;
     width: 760px;
     height: 428px;
@@ -57,7 +57,7 @@
     background: #111827;
     box-shadow: 0 28px 80px rgba(15, 23, 42, 0.2);
   }
-  .hf-remocn-chromatic-aberration-wipe .scene {
+  .hf-catalog-chromatic-aberration-wipe .scene {
     position: absolute;
     inset: 0;
     display: grid;
@@ -67,7 +67,7 @@
     letter-spacing: -0.05em;
     color: #fff;
   }
-  .hf-remocn-chromatic-aberration-wipe .from {
+  .hf-catalog-chromatic-aberration-wipe .from {
     background: linear-gradient(135deg, #111827, #374151);
     transform: translate(
         calc(var(--hf-from-x, 0px) * var(--hf-wipe-ax, 1)),
@@ -76,7 +76,7 @@
       scale(var(--hf-from-scale, 1));
     filter: blur(var(--hf-from-blur, 0px));
   }
-  .hf-remocn-chromatic-aberration-wipe .to {
+  .hf-catalog-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)),
@@ -90,14 +90,14 @@
         calc(var(--hf-clip-left, 0%) + var(--hf-clip-right, 100%) * var(--hf-wipe-l, 0))
     );
   }
-  .hf-remocn-chromatic-aberration-wipe .fx {
+  .hf-catalog-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 {
+  .hf-catalog-chromatic-aberration-wipe .rgb {
     position: absolute;
     inset: 0;
     pointer-events: none;
@@ -144,7 +144,7 @@
     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");
+    var roots = document.querySelectorAll(".hf-catalog-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);
@@ -161,5 +161,5 @@
 
 <!--
   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);
+  tl.fromTo('.hf-catalog-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-catalog-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-catalog-chromatic-aberration-wipe .fx', { '--hf-fx-x': '-110%' }, { '--hf-fx-x': '110%', duration: 0.58, ease: 'power2.inOut' }, startTime + 0.18); tl.fromTo('.hf-catalog-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
index 3465498272..e01271fd57 100644
--- a/registry/components/chromatic-aberration-wipe/demo.html
+++ b/registry/components/chromatic-aberration-wipe/demo.html
@@ -31,7 +31,7 @@
         /* ponytail: scale wrapper (not a GSAP target) to fill ~65% of 1920x1080 */
         transform: scale(1.85);
       }
-      .hf-remocn-chromatic-aberration-wipe {
+      .hf-catalog-chromatic-aberration-wipe {
         --hf-accent: #2563eb;
         --hf-ink: #111827;
         --hf-muted: #6b7280;
@@ -39,7 +39,7 @@
         color: var(--hf-ink);
         font-family: Inter, system-ui, sans-serif;
       }
-      .hf-remocn-chromatic-aberration-wipe {
+      .hf-catalog-chromatic-aberration-wipe {
         position: relative;
         width: 760px;
         height: 428px;
@@ -48,7 +48,7 @@
         background: #111827;
         box-shadow: 0 28px 80px rgba(15, 23, 42, 0.2);
       }
-      .hf-remocn-chromatic-aberration-wipe .scene {
+      .hf-catalog-chromatic-aberration-wipe .scene {
         position: absolute;
         inset: 0;
         display: grid;
@@ -58,13 +58,13 @@
         letter-spacing: -0.05em;
         color: #fff;
       }
-      .hf-remocn-chromatic-aberration-wipe .from {
+      .hf-catalog-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 {
+      .hf-catalog-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(
@@ -72,14 +72,14 @@
             var(--hf-clip-left, 0%)
         );
       }
-      .hf-remocn-chromatic-aberration-wipe .fx {
+      .hf-catalog-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 {
+      .hf-catalog-chromatic-aberration-wipe .rgb {
         position: absolute;
         inset: 0;
         pointer-events: none;
@@ -104,7 +104,7 @@
       data-duration="5"
     >
       <div class="demo-frame">
-        <div class="hf-remocn-chromatic-aberration-wipe">
+        <div class="hf-catalog-chromatic-aberration-wipe">
           <div class="scene from">Before</div>
           <div class="scene to">Chromatic Aberration Wipe</div>
           <div class="fx"></div>
@@ -115,7 +115,7 @@
         const tl = gsap.timeline({ paused: true });
         const startTime = 0.5;
         tl.fromTo(
-          ".hf-remocn-chromatic-aberration-wipe .to",
+          ".hf-catalog-chromatic-aberration-wipe .to",
           { "--hf-clip-right": "100%", "--hf-to-x": "60px", "--hf-to-scale": 1.04 },
           {
             "--hf-clip-right": "0%",
@@ -127,7 +127,7 @@
           startTime,
         );
         tl.to(
-          ".hf-remocn-chromatic-aberration-wipe .from",
+          ".hf-catalog-chromatic-aberration-wipe .from",
           {
             "--hf-from-x": "-70px",
             "--hf-from-scale": 0.96,
@@ -138,13 +138,13 @@
           startTime,
         );
         tl.fromTo(
-          ".hf-remocn-chromatic-aberration-wipe .fx",
+          ".hf-catalog-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-catalog-chromatic-aberration-wipe .rgb",
           { "--hf-rgb-opacity": 0, "--hf-rgb-x": "-16px" },
           {
             "--hf-rgb-opacity": 1,
diff --git a/registry/components/chromatic-aberration-wipe/registry-item.json b/registry/components/chromatic-aberration-wipe/registry-item.json
index f911fc4204..318365c327 100644
--- a/registry/components/chromatic-aberration-wipe/registry-item.json
+++ b/registry/components/chromatic-aberration-wipe/registry-item.json
@@ -4,7 +4,7 @@
   "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"],
+  "tags": ["video-primitive", "transition-primitive"],
   "files": [
     {
       "path": "chromatic-aberration-wipe.html",
diff --git a/registry/components/confetti/confetti.html b/registry/components/confetti/confetti.html
index c0aa68a084..0bde0f5fae 100644
--- a/registry/components/confetti/confetti.html
+++ b/registry/components/confetti/confetti.html
@@ -1,11 +1,11 @@
 <!--
-  Confetti - remocn component ported to HyperFrames authoring format.
+  Confetti - catalog component for HyperFrames.
 
   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="hf-catalog-confetti">
   <div class="mesh"></div>
   <div class="card">
     <div class="spot"></div>
@@ -39,11 +39,11 @@ <h3>Confetti</h3>
 </div>
 
 <style>
-  .hf-remocn-confetti {
+  .hf-catalog-confetti {
     color: var(--fg, #111827);
     font-family: var(--font-body, Inter, system-ui, sans-serif);
   }
-  .hf-remocn-confetti {
+  .hf-catalog-confetti {
     position: relative;
     width: 760px;
     height: 428px;
@@ -52,7 +52,7 @@ <h3>Confetti</h3>
     background: var(--bg, #080b12);
     box-shadow: 0 28px 80px color-mix(in srgb, var(--bg, #0f172a) 20%, transparent);
   }
-  .hf-remocn-confetti .mesh {
+  .hf-catalog-confetti .mesh {
     position: absolute;
     inset: -22%;
     filter: blur(44px);
@@ -74,7 +74,7 @@ <h3>Confetti</h3>
         transparent 34%
       );
   }
-  .hf-remocn-confetti .card {
+  .hf-catalog-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);
@@ -86,7 +86,7 @@ <h3>Confetti</h3>
     text-align: center;
     overflow: hidden;
   }
-  .hf-remocn-confetti .spot {
+  .hf-catalog-confetti .spot {
     position: absolute;
     width: 260px;
     height: 260px;
@@ -99,7 +99,7 @@ <h3>Confetti</h3>
     transform: translate(var(--hf-spot-x, 0px), var(--hf-spot-y, 0px));
     mix-blend-mode: screen;
   }
-  .hf-remocn-confetti .particle {
+  .hf-catalog-confetti .particle {
     position: absolute;
     left: 50%;
     top: 54%;
@@ -110,12 +110,12 @@ <h3>Confetti</h3>
     transform: translate(var(--hf-px, 0px), var(--hf-py, 0px)) rotate(var(--hf-pr, 0deg));
     opacity: var(--hf-po, 0);
   }
-  .hf-remocn-confetti h3 {
+  .hf-catalog-confetti h3 {
     margin: 0;
     font-size: 44px;
     letter-spacing: -0.04em;
   }
-  .hf-remocn-confetti p {
+  .hf-catalog-confetti p {
     margin: var(--space-1, 8px) 0 0;
     color: color-mix(in srgb, var(--muted, #ffffff) 70%, transparent);
   }
@@ -123,5 +123,5 @@ <h3>Confetti</h3>
 
 <!--
   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); }
+  tl.fromTo('.hf-catalog-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-catalog-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-catalog-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
index 1a1297b16e..67f00aa4b6 100644
--- a/registry/components/confetti/demo.html
+++ b/registry/components/confetti/demo.html
@@ -30,11 +30,11 @@
         padding: 52px;
         transform: scale(1.6); /* ponytail: scale wrapper, not GSAP targets */
       }
-      .hf-remocn-confetti {
+      .hf-catalog-confetti {
         color: var(--fg, #111827);
         font-family: var(--font-body, Inter, system-ui, sans-serif);
       }
-      .hf-remocn-confetti {
+      .hf-catalog-confetti {
         position: relative;
         width: 760px;
         height: 428px;
@@ -43,7 +43,7 @@
         background: var(--bg, #080b12);
         box-shadow: 0 28px 80px color-mix(in srgb, var(--bg, #0f172a) 20%, transparent);
       }
-      .hf-remocn-confetti .mesh {
+      .hf-catalog-confetti .mesh {
         position: absolute;
         inset: -22%;
         filter: blur(44px);
@@ -65,7 +65,7 @@
             transparent 34%
           );
       }
-      .hf-remocn-confetti .card {
+      .hf-catalog-confetti .card {
         position: absolute;
         inset: 74px 92px;
         border: 1px solid color-mix(in srgb, var(--border, #ffffff) 16%, transparent);
@@ -77,7 +77,7 @@
         text-align: center;
         overflow: hidden;
       }
-      .hf-remocn-confetti .spot {
+      .hf-catalog-confetti .spot {
         position: absolute;
         width: 260px;
         height: 260px;
@@ -90,7 +90,7 @@
         transform: translate(var(--hf-spot-x, 0px), var(--hf-spot-y, 0px));
         mix-blend-mode: screen;
       }
-      .hf-remocn-confetti .particle {
+      .hf-catalog-confetti .particle {
         position: absolute;
         left: 50%;
         top: 54%;
@@ -101,12 +101,12 @@
         transform: translate(var(--hf-px, 0px), var(--hf-py, 0px)) rotate(var(--hf-pr, 0deg));
         opacity: var(--hf-po, 0);
       }
-      .hf-remocn-confetti h3 {
+      .hf-catalog-confetti h3 {
         margin: 0;
         font-size: 44px;
         letter-spacing: -0.04em;
       }
-      .hf-remocn-confetti p {
+      .hf-catalog-confetti p {
         margin: 8px 0 0;
         font-size: 15px;
         color: color-mix(in srgb, var(--muted, #ffffff) 70%, transparent);
@@ -123,7 +123,7 @@
       data-duration="5"
     >
       <div class="demo-frame">
-        <div class="hf-remocn-confetti">
+        <div class="hf-catalog-confetti">
           <div class="mesh"></div>
           <div class="card">
             <div class="spot"></div>
@@ -160,7 +160,7 @@ <h3>Confetti</h3>
         const tl = gsap.timeline({ paused: true });
         const startTime = 0.5;
         tl.fromTo(
-          ".hf-remocn-confetti .mesh",
+          ".hf-catalog-confetti .mesh",
           {
             "--hf-x1": "18%",
             "--hf-y1": "28%",
@@ -182,12 +182,12 @@ <h3>Confetti</h3>
           startTime,
         );
         tl.fromTo(
-          ".hf-remocn-confetti .spot",
+          ".hf-catalog-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");
+        const particles_confetti = gsap.utils.toArray(".hf-catalog-confetti .particle");
         if (particles_confetti.length) {
           tl.fromTo(
             particles_confetti,
diff --git a/registry/components/confetti/registry-item.json b/registry/components/confetti/registry-item.json
index 3b9c07a6d8..5fa9b58133 100644
--- a/registry/components/confetti/registry-item.json
+++ b/registry/components/confetti/registry-item.json
@@ -4,7 +4,7 @@
   "type": "hyperframes:component",
   "title": "Confetti",
   "description": "A deterministic celebration burst with seeded particles and gravity.",
-  "tags": ["effect", "remocn-port"],
+  "tags": ["effect"],
   "files": [
     {
       "path": "confetti.html",
diff --git a/registry/components/directional-wipe/demo.html b/registry/components/directional-wipe/demo.html
index 5d44799889..c8cac3179c 100644
--- a/registry/components/directional-wipe/demo.html
+++ b/registry/components/directional-wipe/demo.html
@@ -28,10 +28,10 @@
         display: grid;
         place-items: center;
         padding: 52px;
-        /* ponytail: scale wrapper only — GSAP targets live inside .hf-remocn-directional-wipe, not here */
+        /* ponytail: scale wrapper only — GSAP targets live inside .hf-catalog-directional-wipe, not here */
         transform: scale(1.65);
       }
-      .hf-remocn-directional-wipe {
+      .hf-catalog-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);
@@ -43,7 +43,7 @@
         color: var(--hf-ink);
         font-family: Inter, system-ui, sans-serif;
       }
-      .hf-remocn-directional-wipe {
+      .hf-catalog-directional-wipe {
         position: relative;
         width: 760px;
         height: 428px;
@@ -52,7 +52,7 @@
         background: #111827;
         box-shadow: 0 28px 80px rgba(15, 23, 42, 0.2);
       }
-      .hf-remocn-directional-wipe .scene {
+      .hf-catalog-directional-wipe .scene {
         position: absolute;
         inset: 0;
         display: grid;
@@ -62,7 +62,7 @@
         letter-spacing: -0.05em;
         color: #fff;
       }
-      .hf-remocn-directional-wipe .from {
+      .hf-catalog-directional-wipe .from {
         background:
           repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 4px),
           var(--hf-l4);
@@ -70,7 +70,7 @@
           scale(var(--hf-from-scale, 1));
         filter: blur(var(--hf-from-blur, 0px));
       }
-      .hf-remocn-directional-wipe .to {
+      .hf-catalog-directional-wipe .to {
         background:
           repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 4px),
           var(--hf-l3);
@@ -81,14 +81,14 @@
             var(--hf-clip-left, 0%)
         );
       }
-      .hf-remocn-directional-wipe .fx {
+      .hf-catalog-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 {
+      .hf-catalog-directional-wipe .rgb {
         position: absolute;
         inset: 0;
         pointer-events: none;
@@ -113,7 +113,7 @@
       data-duration="5"
     >
       <div class="demo-frame">
-        <div class="hf-remocn-directional-wipe">
+        <div class="hf-catalog-directional-wipe">
           <div class="scene from">Before</div>
           <div class="scene to">Directional Wipe</div>
           <div class="fx"></div>
@@ -124,7 +124,7 @@
         const tl = gsap.timeline({ paused: true });
         const startTime = 0.5;
         tl.fromTo(
-          ".hf-remocn-directional-wipe .to",
+          ".hf-catalog-directional-wipe .to",
           { "--hf-clip-right": "100%", "--hf-to-x": "60px", "--hf-to-scale": 1.04 },
           {
             "--hf-clip-right": "0%",
@@ -136,7 +136,7 @@
           startTime,
         );
         tl.to(
-          ".hf-remocn-directional-wipe .from",
+          ".hf-catalog-directional-wipe .from",
           {
             "--hf-from-x": "-70px",
             "--hf-from-scale": 0.96,
@@ -147,13 +147,13 @@
           startTime,
         );
         tl.fromTo(
-          ".hf-remocn-directional-wipe .fx",
+          ".hf-catalog-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-catalog-directional-wipe .rgb",
           { "--hf-rgb-opacity": 0, "--hf-rgb-x": "-16px" },
           {
             "--hf-rgb-opacity": 1,
diff --git a/registry/components/directional-wipe/directional-wipe.html b/registry/components/directional-wipe/directional-wipe.html
index 4e02639ae2..63c495fc81 100644
--- a/registry/components/directional-wipe/directional-wipe.html
+++ b/registry/components/directional-wipe/directional-wipe.html
@@ -1,5 +1,5 @@
 <!--
-  Directional Wipe - remocn component ported to HyperFrames authoring format.
+  Directional Wipe - catalog component for HyperFrames.
 
   Paste the markup and CSS into a composition. Drive the timeline integration
   from a paused GSAP timeline so renders remain deterministic.
@@ -21,7 +21,7 @@
 -->
 
 <div
-  class="hf-remocn-directional-wipe"
+  class="hf-catalog-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" }] }
@@ -34,7 +34,7 @@
 </div>
 
 <style>
-  .hf-remocn-directional-wipe {
+  .hf-catalog-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);
@@ -46,7 +46,7 @@
     color: var(--hf-ink);
     font-family: Inter, system-ui, sans-serif;
   }
-  .hf-remocn-directional-wipe {
+  .hf-catalog-directional-wipe {
     position: relative;
     width: 760px;
     height: 428px;
@@ -55,7 +55,7 @@
     background: #111827;
     box-shadow: 0 28px 80px rgba(15, 23, 42, 0.2);
   }
-  .hf-remocn-directional-wipe .scene {
+  .hf-catalog-directional-wipe .scene {
     position: absolute;
     inset: 0;
     display: grid;
@@ -65,7 +65,7 @@
     letter-spacing: -0.05em;
     color: #fff;
   }
-  .hf-remocn-directional-wipe .from {
+  .hf-catalog-directional-wipe .from {
     background:
       repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 4px),
       var(--hf-l4);
@@ -73,7 +73,7 @@
       scale(var(--hf-from-scale, 1));
     filter: blur(var(--hf-from-blur, 0px));
   }
-  .hf-remocn-directional-wipe .to {
+  .hf-catalog-directional-wipe .to {
     background:
       repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 4px),
       var(--hf-l3);
@@ -84,14 +84,14 @@
         var(--hf-clip-left, 0%)
     );
   }
-  .hf-remocn-directional-wipe .fx {
+  .hf-catalog-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 {
+  .hf-catalog-directional-wipe .rgb {
     position: absolute;
     inset: 0;
     pointer-events: none;
@@ -132,7 +132,7 @@
     var palette = palettes[pick(palettes, vars.palette, "slate")];
     var corner = corners[pick(corners, vars.corner, "rounded")];
 
-    var roots = document.querySelectorAll(".hf-remocn-directional-wipe");
+    var roots = document.querySelectorAll(".hf-catalog-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);
@@ -142,5 +142,5 @@
 
 <!--
   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);
+  tl.fromTo('.hf-catalog-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-catalog-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-catalog-directional-wipe .fx', { '--hf-fx-x': '-110%' }, { '--hf-fx-x': '110%', duration: 0.58, ease: 'power2.inOut' }, startTime + 0.18); tl.fromTo('.hf-catalog-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
index a3df94f26b..a03be0590f 100644
--- a/registry/components/directional-wipe/registry-item.json
+++ b/registry/components/directional-wipe/registry-item.json
@@ -4,7 +4,7 @@
   "type": "hyperframes:component",
   "title": "Directional Wipe",
   "description": "A directional scene push that slides one panel over another.",
-  "tags": ["transition-primitive", "remocn-port"],
+  "tags": ["transition-primitive"],
   "variables": [
     {
       "id": "palette",
diff --git a/registry/components/focus-blur-resolve/demo.html b/registry/components/focus-blur-resolve/demo.html
index b44494049d..9df59bc460 100644
--- a/registry/components/focus-blur-resolve/demo.html
+++ b/registry/components/focus-blur-resolve/demo.html
@@ -33,19 +33,19 @@
         /* ponytail: scale wrapper (not a GSAP target) to fill ~65% of frame */
         transform: scale(2.8);
       }
-      .hf-remocn-focus-blur-resolve {
+      .hf-catalog-focus-blur-resolve {
         color: #18181b;
         font-family: Inter, system-ui, sans-serif;
         font-weight: 900;
         letter-spacing: -0.04em;
       }
-      .hf-remocn-focus-blur-resolve {
+      .hf-catalog-focus-blur-resolve {
         display: inline-flex;
         gap: 12px;
         font-size: 56px;
         line-height: 1;
       }
-      .hf-remocn-focus-blur-resolve span {
+      .hf-catalog-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));
@@ -64,13 +64,13 @@
       data-duration="5"
     >
       <div class="demo-frame">
-        <div class="hf-remocn-focus-blur-resolve"><span>Crystal</span><span>clear</span></div>
+        <div class="hf-catalog-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",
+          ".hf-catalog-focus-blur-resolve span",
           { opacity: 0, "--hf-word-scale": 1.08, "--hf-word-blur": "16px" },
           {
             opacity: 1,
diff --git a/registry/components/focus-blur-resolve/focus-blur-resolve.html b/registry/components/focus-blur-resolve/focus-blur-resolve.html
index 60d5b58273..c1f43e4713 100644
--- a/registry/components/focus-blur-resolve/focus-blur-resolve.html
+++ b/registry/components/focus-blur-resolve/focus-blur-resolve.html
@@ -1,5 +1,5 @@
 <!--
-  Focus Blur Resolve - remocn typography primitive for HyperFrames.
+  Focus Blur Resolve - 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.
@@ -22,7 +22,7 @@
 -->
 
 <div
-  class="hf-remocn-focus-blur-resolve"
+  class="hf-catalog-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" }] },
@@ -33,19 +33,19 @@
 </div>
 
 <style>
-  .hf-remocn-focus-blur-resolve {
+  .hf-catalog-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 {
+  .hf-catalog-focus-blur-resolve {
     display: inline-flex;
     gap: 12px;
     font-size: var(--hf-word-size, 56px);
     line-height: 1;
   }
-  .hf-remocn-focus-blur-resolve span {
+  .hf-catalog-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));
@@ -76,7 +76,7 @@
     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");
+    var roots = document.querySelectorAll(".hf-catalog-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);
@@ -87,5 +87,5 @@
 
 <!--
   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);
+  tl.fromTo('.hf-catalog-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
index 285d362098..21d22c8e96 100644
--- a/registry/components/focus-blur-resolve/registry-item.json
+++ b/registry/components/focus-blur-resolve/registry-item.json
@@ -4,7 +4,7 @@
   "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"],
+  "tags": ["motion-primitive", "typography"],
   "files": [
     {
       "path": "focus-blur-resolve.html",
diff --git a/registry/components/line-by-line-slide/demo.html b/registry/components/line-by-line-slide/demo.html
index e64073fe74..ee64704b37 100644
--- a/registry/components/line-by-line-slide/demo.html
+++ b/registry/components/line-by-line-slide/demo.html
@@ -34,20 +34,20 @@
         transform: scale(2.8);
         transform-origin: center center;
       }
-      .hf-remocn-line-by-line-slide {
+      .hf-catalog-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 {
+      .hf-catalog-line-by-line-slide {
         display: grid;
         gap: 10px;
         font-size: 64px;
         line-height: 1.05;
         overflow: hidden;
       }
-      .hf-remocn-line-by-line-slide span {
+      .hf-catalog-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));
@@ -65,7 +65,7 @@
       data-duration="5"
     >
       <div class="demo-frame">
-        <div class="hf-remocn-line-by-line-slide">
+        <div class="hf-catalog-line-by-line-slide">
           <span>Design faster</span><span>Render cleaner</span><span>Ship louder</span>
         </div>
       </div>
@@ -73,7 +73,7 @@
         const tl = gsap.timeline({ paused: true });
         const startTime = 0.5;
         tl.fromTo(
-          ".hf-remocn-line-by-line-slide span",
+          ".hf-catalog-line-by-line-slide span",
           { opacity: 0, "--hf-line-x": "-36px", "--hf-line-y": "18px", "--hf-line-blur": "6px" },
           {
             opacity: 1,
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
index 9f8fff93d1..9d14a22a9a 100644
--- a/registry/components/line-by-line-slide/line-by-line-slide.html
+++ b/registry/components/line-by-line-slide/line-by-line-slide.html
@@ -1,5 +1,5 @@
 <!--
-  Line-by-Line Slide - remocn typography primitive for HyperFrames.
+  Line-by-Line Slide - 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.
@@ -24,7 +24,7 @@
 -->
 
 <div
-  class="hf-remocn-line-by-line-slide"
+  class="hf-catalog-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"}]},
@@ -36,20 +36,20 @@
 </div>
 
 <style>
-  .hf-remocn-line-by-line-slide {
+  .hf-catalog-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 {
+  .hf-catalog-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 {
+  .hf-catalog-line-by-line-slide span {
     display: block;
     transform: translate(
       calc(var(--hf-line-x, 0px) * var(--hf-line-axis-x, 1)),
@@ -88,7 +88,7 @@
     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");
+    var roots = document.querySelectorAll(".hf-catalog-line-by-line-slide");
     for (var i = 0; i < roots.length; i += 1) {
       var root = roots[i];
       root.style.setProperty("--hf-line-size", size);
@@ -101,5 +101,5 @@
 
 <!--
   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);
+  tl.fromTo('.hf-catalog-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
index b91e2ed504..00f5251f4e 100644
--- a/registry/components/line-by-line-slide/registry-item.json
+++ b/registry/components/line-by-line-slide/registry-item.json
@@ -4,7 +4,7 @@
   "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"],
+  "tags": ["motion-primitive", "typography"],
   "files": [
     {
       "path": "line-by-line-slide.html",
diff --git a/registry/components/matrix-decode/demo.html b/registry/components/matrix-decode/demo.html
index f8f9610da4..8dc47a1276 100644
--- a/registry/components/matrix-decode/demo.html
+++ b/registry/components/matrix-decode/demo.html
@@ -43,7 +43,7 @@
         text-transform: uppercase;
         color: #71717a;
       }
-      .hf-remocn-matrix-decode {
+      .hf-catalog-matrix-decode {
         display: inline-flex;
         gap: 4px;
         font:
@@ -54,7 +54,7 @@
         color: #4ade80;
         text-shadow: 0 0 24px rgba(74, 222, 128, 0.45);
       }
-      .hf-remocn-matrix-decode span {
+      .hf-catalog-matrix-decode span {
         display: inline-block;
         min-width: 0.64em;
         opacity: var(--hf-matrix-opacity, 1);
@@ -72,7 +72,7 @@
     >
       <div class="demo-frame">
         <div class="demo-label">Matrix Decode</div>
-        <div class="hf-remocn-matrix-decode" data-final="HYPERFRAMES">
+        <div class="hf-catalog-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>
@@ -81,7 +81,7 @@
         const tl = gsap.timeline({ paused: true });
         const startTime = 0.5;
         tl.fromTo(
-          ".hf-remocn-matrix-decode span",
+          ".hf-catalog-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/matrix-decode.html b/registry/components/matrix-decode/matrix-decode.html
index 9442627864..a2d3c69902 100644
--- a/registry/components/matrix-decode/matrix-decode.html
+++ b/registry/components/matrix-decode/matrix-decode.html
@@ -1,5 +1,5 @@
 <!--
-  Matrix Decode - remocn typography primitive for HyperFrames.
+  Matrix Decode - 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.
@@ -25,7 +25,7 @@
 -->
 
 <div
-  class="hf-remocn-matrix-decode"
+  class="hf-catalog-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" },
@@ -39,13 +39,13 @@
 </div>
 
 <style>
-  .hf-remocn-matrix-decode {
+  .hf-catalog-matrix-decode {
     color: #18181b;
     font-family: Inter, system-ui, sans-serif;
     font-weight: 900;
     letter-spacing: -0.04em;
   }
-  .hf-remocn-matrix-decode {
+  .hf-catalog-matrix-decode {
     display: inline-flex;
     gap: 3px;
     font:
@@ -58,7 +58,7 @@
     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 {
+  .hf-catalog-matrix-decode span {
     display: inline-block;
     min-width: 0.64em;
     opacity: var(--hf-matrix-opacity, 1);
@@ -102,7 +102,7 @@
     var accent = accents[pick(accents, vars.accent, "green")];
     var glow = glows[pick(glows, vars.glow, "standard")];
 
-    var roots = document.querySelectorAll(".hf-remocn-matrix-decode");
+    var roots = document.querySelectorAll(".hf-catalog-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);
@@ -124,5 +124,5 @@
 
 <!--
   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);
+  tl.fromTo('.hf-catalog-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
index 029a797ea9..59a833d89e 100644
--- a/registry/components/matrix-decode/registry-item.json
+++ b/registry/components/matrix-decode/registry-item.json
@@ -4,7 +4,7 @@
   "type": "hyperframes:component",
   "title": "Matrix Decode",
   "description": "Random scramble resolves left-to-right into the target text.",
-  "tags": ["motion-primitive", "remocn-port", "typography"],
+  "tags": ["motion-primitive", "typography"],
   "files": [
     {
       "path": "matrix-decode.html",
diff --git a/registry/components/mesh-gradient-bg/demo.html b/registry/components/mesh-gradient-bg/demo.html
index d6cc60eae4..3c7c0b90eb 100644
--- a/registry/components/mesh-gradient-bg/demo.html
+++ b/registry/components/mesh-gradient-bg/demo.html
@@ -30,7 +30,7 @@
         padding: 52px;
         transform: scale(1.75);
       }
-      .hf-remocn-mesh-gradient-bg {
+      .hf-catalog-mesh-gradient-bg {
         --hf-accent: #2563eb;
         --hf-ink: #111827;
         --hf-muted: #6b7280;
@@ -38,7 +38,7 @@
         color: var(--hf-ink);
         font-family: Inter, system-ui, sans-serif;
       }
-      .hf-remocn-mesh-gradient-bg {
+      .hf-catalog-mesh-gradient-bg {
         position: relative;
         width: 760px;
         height: 428px;
@@ -47,7 +47,7 @@
         background: #080b12;
         box-shadow: 0 28px 80px rgba(15, 23, 42, 0.2);
       }
-      .hf-remocn-mesh-gradient-bg .mesh {
+      .hf-catalog-mesh-gradient-bg .mesh {
         position: absolute;
         inset: -22%;
         filter: blur(44px);
@@ -69,7 +69,7 @@
             transparent 34%
           );
       }
-      .hf-remocn-mesh-gradient-bg .card {
+      .hf-catalog-mesh-gradient-bg .card {
         position: absolute;
         inset: 74px 92px;
         border: 1px solid rgba(255, 255, 255, 0.16);
@@ -81,7 +81,7 @@
         text-align: center;
         overflow: hidden;
       }
-      .hf-remocn-mesh-gradient-bg .spot {
+      .hf-catalog-mesh-gradient-bg .spot {
         position: absolute;
         width: 260px;
         height: 260px;
@@ -90,7 +90,7 @@
         transform: translate(var(--hf-spot-x, 0px), var(--hf-spot-y, 0px));
         mix-blend-mode: screen;
       }
-      .hf-remocn-mesh-gradient-bg .particle {
+      .hf-catalog-mesh-gradient-bg .particle {
         position: absolute;
         left: 50%;
         top: 54%;
@@ -101,12 +101,12 @@
         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 {
+      .hf-catalog-mesh-gradient-bg h3 {
         margin: 0;
         font-size: 44px;
         letter-spacing: -0.04em;
       }
-      .hf-remocn-mesh-gradient-bg p {
+      .hf-catalog-mesh-gradient-bg p {
         margin: 8px 0 0;
         font-size: 18px;
         color: rgba(255, 255, 255, 0.7);
@@ -123,7 +123,7 @@
       data-duration="5"
     >
       <div class="demo-frame">
-        <div class="hf-remocn-mesh-gradient-bg">
+        <div class="hf-catalog-mesh-gradient-bg">
           <div class="mesh"></div>
           <div class="card">
             <div class="spot"></div>
@@ -138,7 +138,7 @@ <h3>Mesh Gradient Background</h3>
         const tl = gsap.timeline({ paused: true });
         const startTime = 0.5;
         tl.fromTo(
-          ".hf-remocn-mesh-gradient-bg .mesh",
+          ".hf-catalog-mesh-gradient-bg .mesh",
           {
             "--hf-x1": "18%",
             "--hf-y1": "28%",
@@ -160,13 +160,13 @@ <h3>Mesh Gradient Background</h3>
           startTime,
         );
         tl.fromTo(
-          ".hf-remocn-mesh-gradient-bg .spot",
+          ".hf-catalog-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",
+          ".hf-catalog-mesh-gradient-bg .particle",
         );
         if (particles_mesh_gradient_bg.length) {
           tl.fromTo(
diff --git a/registry/components/mesh-gradient-bg/mesh-gradient-bg.html b/registry/components/mesh-gradient-bg/mesh-gradient-bg.html
index 44c9fd05cd..3b46a82b96 100644
--- a/registry/components/mesh-gradient-bg/mesh-gradient-bg.html
+++ b/registry/components/mesh-gradient-bg/mesh-gradient-bg.html
@@ -1,11 +1,11 @@
 <!--
-  Mesh Gradient Background - remocn component ported to HyperFrames authoring format.
+  Mesh Gradient Background - catalog component for HyperFrames.
 
   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="hf-catalog-mesh-gradient-bg">
   <div class="mesh"></div>
   <div class="card">
     <div class="spot"></div>
@@ -17,7 +17,7 @@ <h3>Mesh Gradient Background</h3>
 </div>
 
 <style>
-  .hf-remocn-mesh-gradient-bg {
+  .hf-catalog-mesh-gradient-bg {
     --hf-accent: #2563eb;
     --hf-ink: #111827;
     --hf-muted: #6b7280;
@@ -25,7 +25,7 @@ <h3>Mesh Gradient Background</h3>
     color: var(--hf-ink);
     font-family: Inter, system-ui, sans-serif;
   }
-  .hf-remocn-mesh-gradient-bg {
+  .hf-catalog-mesh-gradient-bg {
     position: relative;
     width: 760px;
     height: 428px;
@@ -34,7 +34,7 @@ <h3>Mesh Gradient Background</h3>
     background: #080b12;
     box-shadow: 0 28px 80px rgba(15, 23, 42, 0.2);
   }
-  .hf-remocn-mesh-gradient-bg .mesh {
+  .hf-catalog-mesh-gradient-bg .mesh {
     position: absolute;
     inset: -22%;
     filter: blur(44px);
@@ -52,7 +52,7 @@ <h3>Mesh Gradient Background</h3>
       ),
       radial-gradient(circle at var(--hf-x3, 46%) var(--hf-y3, 78%), #34d399 0 18%, transparent 34%);
   }
-  .hf-remocn-mesh-gradient-bg .card {
+  .hf-catalog-mesh-gradient-bg .card {
     position: absolute;
     inset: 74px 92px;
     border: 1px solid rgba(255, 255, 255, 0.16);
@@ -64,7 +64,7 @@ <h3>Mesh Gradient Background</h3>
     text-align: center;
     overflow: hidden;
   }
-  .hf-remocn-mesh-gradient-bg .spot {
+  .hf-catalog-mesh-gradient-bg .spot {
     position: absolute;
     width: 260px;
     height: 260px;
@@ -73,7 +73,7 @@ <h3>Mesh Gradient Background</h3>
     transform: translate(var(--hf-spot-x, 0px), var(--hf-spot-y, 0px));
     mix-blend-mode: screen;
   }
-  .hf-remocn-mesh-gradient-bg .particle {
+  .hf-catalog-mesh-gradient-bg .particle {
     position: absolute;
     left: 50%;
     top: 54%;
@@ -84,12 +84,12 @@ <h3>Mesh Gradient Background</h3>
     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 {
+  .hf-catalog-mesh-gradient-bg h3 {
     margin: 0;
     font-size: 44px;
     letter-spacing: -0.04em;
   }
-  .hf-remocn-mesh-gradient-bg p {
+  .hf-catalog-mesh-gradient-bg p {
     margin: 8px 0 0;
     color: rgba(255, 255, 255, 0.7);
   }
@@ -97,5 +97,5 @@ <h3>Mesh Gradient Background</h3>
 
 <!--
   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); }
+  tl.fromTo('.hf-catalog-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-catalog-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-catalog-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
index bd76f31dcf..c3db9f31e7 100644
--- a/registry/components/mesh-gradient-bg/registry-item.json
+++ b/registry/components/mesh-gradient-bg/registry-item.json
@@ -4,7 +4,7 @@
   "type": "hyperframes:component",
   "title": "Mesh Gradient Background",
   "description": "A render-safe mesh gradient using animated radial layers.",
-  "tags": ["effect", "remocn-port"],
+  "tags": ["effect"],
   "files": [
     {
       "path": "mesh-gradient-bg.html",
diff --git a/registry/components/onboarding-stepper-flow/onboarding-stepper-flow.html b/registry/components/onboarding-stepper-flow/onboarding-stepper-flow.html
index 3870c88a1a..f9cbb0a121 100644
--- a/registry/components/onboarding-stepper-flow/onboarding-stepper-flow.html
+++ b/registry/components/onboarding-stepper-flow/onboarding-stepper-flow.html
@@ -1,5 +1,5 @@
 <!--
-  Onboarding Stepper Flow - Remocn-inspired composed UI flow for HyperFrames.
+  Onboarding Stepper Flow - 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.
diff --git a/registry/components/onboarding-stepper-flow/registry-item.json b/registry/components/onboarding-stepper-flow/registry-item.json
index a766022244..8781300627 100644
--- a/registry/components/onboarding-stepper-flow/registry-item.json
+++ b/registry/components/onboarding-stepper-flow/registry-item.json
@@ -4,7 +4,7 @@
   "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"],
+  "tags": ["ui-flow", "onboarding", "stepper"],
   "files": [
     {
       "path": "onboarding-stepper-flow.html",
diff --git a/registry/components/per-word-crossfade/demo.html b/registry/components/per-word-crossfade/demo.html
index e203b4e944..a9b2c5e1a5 100644
--- a/registry/components/per-word-crossfade/demo.html
+++ b/registry/components/per-word-crossfade/demo.html
@@ -51,19 +51,19 @@
         will-change: opacity;
       }
       /* incoming phrase — the GSAP-animated element */
-      .hf-remocn-per-word-crossfade {
+      .hf-catalog-per-word-crossfade {
         color: #18181b;
         font-family: Inter, system-ui, sans-serif;
         font-weight: 900;
         letter-spacing: -0.04em;
       }
-      .hf-remocn-per-word-crossfade {
+      .hf-catalog-per-word-crossfade {
         display: inline-flex;
         gap: 28px;
         font-size: 128px;
         line-height: 1;
       }
-      .hf-remocn-per-word-crossfade span {
+      .hf-catalog-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));
@@ -96,7 +96,7 @@
           <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">
+        <div class="hf-catalog-per-word-crossfade">
           <span>Create</span><span>once</span><span>reuse</span><span>everywhere</span>
         </div>
         <div class="demo-label">per-word crossfade</div>
@@ -119,7 +119,7 @@
 
         // incoming phrase fades in word-by-word (the named component)
         tl.fromTo(
-          ".hf-remocn-per-word-crossfade span",
+          ".hf-catalog-per-word-crossfade span",
           { opacity: 0, "--hf-word-y": "22px", "--hf-word-scale": 0.92, "--hf-word-blur": "5px" },
           {
             opacity: 1,
diff --git a/registry/components/per-word-crossfade/per-word-crossfade.html b/registry/components/per-word-crossfade/per-word-crossfade.html
index d4ee711ee7..99fb0c58e7 100644
--- a/registry/components/per-word-crossfade/per-word-crossfade.html
+++ b/registry/components/per-word-crossfade/per-word-crossfade.html
@@ -1,5 +1,5 @@
 <!--
-  Per-Word Crossfade - remocn typography primitive for HyperFrames.
+  Per-Word Crossfade - 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.
@@ -25,7 +25,7 @@
 -->
 
 <div
-  class="hf-remocn-per-word-crossfade"
+  class="hf-catalog-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" }] },
@@ -37,19 +37,19 @@
 </div>
 
 <style>
-  .hf-remocn-per-word-crossfade {
+  .hf-catalog-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 {
+  .hf-catalog-per-word-crossfade {
     display: inline-flex;
     gap: 12px;
     font-size: 56px;
     line-height: 1;
   }
-  .hf-remocn-per-word-crossfade span {
+  .hf-catalog-per-word-crossfade span {
     display: inline-block;
     transform: translate(
         var(--hf-word-x, 0px),
@@ -90,7 +90,7 @@
     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");
+    var roots = document.querySelectorAll(".hf-catalog-per-word-crossfade");
     for (var i = 0; i < roots.length; i += 1) {
       var root = roots[i];
       root.style.setProperty("--hf-word-drift", String(drift));
@@ -111,5 +111,5 @@
 
 <!--
   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);
+  tl.fromTo('.hf-catalog-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
index 3739b7b456..19498ea38e 100644
--- a/registry/components/per-word-crossfade/registry-item.json
+++ b/registry/components/per-word-crossfade/registry-item.json
@@ -4,7 +4,7 @@
   "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"],
+  "tags": ["motion-primitive", "typography"],
   "files": [
     {
       "path": "per-word-crossfade.html",
diff --git a/registry/components/perspective-marquee/demo.html b/registry/components/perspective-marquee/demo.html
index aad035f04d..305d2b3350 100644
--- a/registry/components/perspective-marquee/demo.html
+++ b/registry/components/perspective-marquee/demo.html
@@ -30,25 +30,25 @@
         /* ponytail: scale on wrapper — GSAP only targets the inner div, so CSS transform is safe here */
         transform: scale(3);
       }
-      .hf-remocn-perspective-marquee {
+      .hf-catalog-perspective-marquee {
         color: #18181b;
         font-family: Inter, system-ui, sans-serif;
         font-weight: 900;
         letter-spacing: -0.04em;
       }
-      .hf-remocn-perspective-marquee {
+      .hf-catalog-perspective-marquee {
         width: 580px;
         perspective: 900px;
         overflow: hidden;
         transform: rotateX(18deg);
       }
-      .hf-remocn-perspective-marquee div {
+      .hf-catalog-perspective-marquee div {
         display: inline-flex;
         gap: 22px;
         white-space: nowrap;
         transform: translateX(var(--hf-marquee-x, 0px));
       }
-      .hf-remocn-perspective-marquee span {
+      .hf-catalog-perspective-marquee span {
         padding: 12px 18px;
         border-radius: 999px;
         background: #18181b;
@@ -68,7 +68,7 @@
       data-duration="5"
     >
       <div class="demo-frame">
-        <div class="hf-remocn-perspective-marquee">
+        <div class="hf-catalog-perspective-marquee">
           <div>
             <span>COMPONENTS</span><span>PRIMITIVES</span><span>TRANSITIONS</span><span>AGENTS</span
             ><span>COMPONENTS</span><span>PRIMITIVES</span><span>TRANSITIONS</span
@@ -80,7 +80,7 @@
         const tl = gsap.timeline({ paused: true });
         const startTime = 0.5;
         tl.fromTo(
-          ".hf-remocn-perspective-marquee div",
+          ".hf-catalog-perspective-marquee div",
           { "--hf-marquee-x": "0px" },
           { "--hf-marquee-x": "-360px", duration: 4.5, ease: "none" },
           startTime,
diff --git a/registry/components/perspective-marquee/perspective-marquee.html b/registry/components/perspective-marquee/perspective-marquee.html
index ec6bf3211a..e95d593b64 100644
--- a/registry/components/perspective-marquee/perspective-marquee.html
+++ b/registry/components/perspective-marquee/perspective-marquee.html
@@ -1,5 +1,5 @@
 <!--
-  Perspective Marquee - remocn typography primitive for HyperFrames.
+  Perspective Marquee - 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.
@@ -28,7 +28,7 @@
 -->
 
 <div
-  class="hf-remocn-perspective-marquee"
+  class="hf-catalog-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" }] },
@@ -43,25 +43,25 @@
 </div>
 
 <style>
-  .hf-remocn-perspective-marquee {
+  .hf-catalog-perspective-marquee {
     color: #18181b;
     font-family: Inter, system-ui, sans-serif;
     font-weight: 900;
     letter-spacing: -0.04em;
   }
-  .hf-remocn-perspective-marquee {
+  .hf-catalog-perspective-marquee {
     width: 720px;
     perspective: 900px;
     overflow: hidden;
     transform: rotateX(var(--hf-marquee-tilt, 18deg));
   }
-  .hf-remocn-perspective-marquee div {
+  .hf-catalog-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 {
+  .hf-catalog-perspective-marquee span {
     padding: 12px 18px;
     border-radius: 999px;
     background: var(--hf-marquee-pill-bg, #18181b);
@@ -110,7 +110,7 @@
     var tone = tones[pick(tones, vars.tone, "ink")];
     var words = parseWords(vars.words);
 
-    var roots = document.querySelectorAll(".hf-remocn-perspective-marquee");
+    var roots = document.querySelectorAll(".hf-catalog-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));
@@ -132,5 +132,5 @@
 
 <!--
   Timeline integration:
-  tl.fromTo('.hf-remocn-perspective-marquee div', { '--hf-marquee-x': '0px' }, { '--hf-marquee-x': '-360px', duration: 4.5, ease: 'none' }, startTime);
+  tl.fromTo('.hf-catalog-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
index 99f5b37bd8..d5a15d5196 100644
--- a/registry/components/perspective-marquee/registry-item.json
+++ b/registry/components/perspective-marquee/registry-item.json
@@ -4,7 +4,7 @@
   "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"],
+  "tags": ["motion-primitive", "typography"],
   "files": [
     {
       "path": "perspective-marquee.html",
diff --git a/registry/components/rgb-glitch-text/demo.html b/registry/components/rgb-glitch-text/demo.html
index 0d16a1349e..ffda82b6d1 100644
--- a/registry/components/rgb-glitch-text/demo.html
+++ b/registry/components/rgb-glitch-text/demo.html
@@ -32,35 +32,35 @@
         zoom: 0.28;
       }
       /* ponytail: scale-up via font-size — GSAP only touches CSS vars, not transform */
-      .hf-remocn-rgb-glitch-text {
+      .hf-catalog-rgb-glitch-text {
         color: #fafafa;
         font-family: Inter, system-ui, sans-serif;
         font-weight: 900;
         letter-spacing: -0.04em;
       }
-      .hf-remocn-rgb-glitch-text {
+      .hf-catalog-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 {
+      .hf-catalog-rgb-glitch-text span,
+      .hf-catalog-rgb-glitch-text strong {
         position: absolute;
         inset: 0;
       }
-      .hf-remocn-rgb-glitch-text span:first-child {
+      .hf-catalog-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) {
+      .hf-catalog-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 {
+      .hf-catalog-rgb-glitch-text strong {
         color: #fafafa;
       }
       .demo-label {
@@ -82,7 +82,7 @@
       data-duration="5"
     >
       <div class="demo-frame">
-        <div class="hf-remocn-rgb-glitch-text">
+        <div class="hf-catalog-rgb-glitch-text">
           <span>GLITCH</span><span>GLITCH</span><strong>GLITCH</strong>
         </div>
         <div class="demo-label">RGB Glitch Text</div>
@@ -90,9 +90,9 @@
       <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-catalog-rgb-glitch-text", { opacity: 1, duration: 0.01 }, startTime);
         tl.to(
-          ".hf-remocn-rgb-glitch-text",
+          ".hf-catalog-rgb-glitch-text",
           {
             "--hf-glitch-red": "-20px",
             "--hf-glitch-blue": "20px",
diff --git a/registry/components/rgb-glitch-text/registry-item.json b/registry/components/rgb-glitch-text/registry-item.json
index 3091ca098b..10c7d6cd90 100644
--- a/registry/components/rgb-glitch-text/registry-item.json
+++ b/registry/components/rgb-glitch-text/registry-item.json
@@ -4,7 +4,7 @@
   "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"],
+  "tags": ["motion-primitive", "typography"],
   "files": [
     {
       "path": "rgb-glitch-text.html",
diff --git a/registry/components/rgb-glitch-text/rgb-glitch-text.html b/registry/components/rgb-glitch-text/rgb-glitch-text.html
index a1fd3da4ea..54552a2306 100644
--- a/registry/components/rgb-glitch-text/rgb-glitch-text.html
+++ b/registry/components/rgb-glitch-text/rgb-glitch-text.html
@@ -1,5 +1,5 @@
 <!--
-  RGB Glitch Text - remocn typography primitive for HyperFrames.
+  RGB Glitch Text - 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.
@@ -24,7 +24,7 @@
 -->
 
 <div
-  class="hf-remocn-rgb-glitch-text"
+  class="hf-catalog-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" }] },
@@ -35,33 +35,33 @@
 </div>
 
 <style>
-  .hf-remocn-rgb-glitch-text {
+  .hf-catalog-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 {
+  .hf-catalog-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 {
+  .hf-catalog-rgb-glitch-text span,
+  .hf-catalog-rgb-glitch-text strong {
     position: absolute;
     inset: 0;
   }
-  .hf-remocn-rgb-glitch-text span:first-child {
+  .hf-catalog-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) {
+  .hf-catalog-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 {
+  .hf-catalog-rgb-glitch-text strong {
     color: var(--hf-glitch-ink, #18181b);
   }
 </style>
@@ -92,7 +92,7 @@
     var text =
       typeof vars.text === "string" && vars.text.trim() !== "" ? vars.text.trim() : "GLITCH";
 
-    var roots = document.querySelectorAll(".hf-remocn-rgb-glitch-text");
+    var roots = document.querySelectorAll(".hf-catalog-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);
@@ -106,5 +106,5 @@
 
 <!--
   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);
+  tl.to('.hf-catalog-rgb-glitch-text', { opacity: 1, duration: 0.01 }, startTime); tl.to('.hf-catalog-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/separator/registry-item.json b/registry/components/separator/registry-item.json
index 4d959c1212..f4ff9aa37f 100644
--- a/registry/components/separator/registry-item.json
+++ b/registry/components/separator/registry-item.json
@@ -4,7 +4,7 @@
   "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"],
+  "tags": ["video-primitive", "separator", "layout"],
   "files": [
     {
       "path": "separator.html",
diff --git a/registry/components/settings-toggle-flow/registry-item.json b/registry/components/settings-toggle-flow/registry-item.json
index 9bcbb0cc20..f12d230727 100644
--- a/registry/components/settings-toggle-flow/registry-item.json
+++ b/registry/components/settings-toggle-flow/registry-item.json
@@ -4,7 +4,7 @@
   "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"],
+  "tags": ["ui-flow", "settings", "toggle"],
   "files": [
     {
       "path": "settings-toggle-flow.html",
diff --git a/registry/components/settings-toggle-flow/settings-toggle-flow.html b/registry/components/settings-toggle-flow/settings-toggle-flow.html
index fd62da4e56..da8a6d26f6 100644
--- a/registry/components/settings-toggle-flow/settings-toggle-flow.html
+++ b/registry/components/settings-toggle-flow/settings-toggle-flow.html
@@ -1,5 +1,5 @@
 <!--
-  Settings Toggle Flow - Remocn-inspired composed UI flow for HyperFrames.
+  Settings Toggle Flow - 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.
diff --git a/registry/components/shared-axis-y/demo.html b/registry/components/shared-axis-y/demo.html
index 8174ea6122..04500822be 100644
--- a/registry/components/shared-axis-y/demo.html
+++ b/registry/components/shared-axis-y/demo.html
@@ -77,7 +77,7 @@
         height: 1px;
         background: #e4e4e7;
       }
-      .hf-remocn-shared-axis-y {
+      .hf-catalog-shared-axis-y {
         color: #18181b;
         font-family: Inter, system-ui, sans-serif;
         font-weight: 800;
@@ -87,7 +87,7 @@
         font-size: 48px;
         line-height: 1;
       }
-      .hf-remocn-shared-axis-y span {
+      .hf-catalog-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));
@@ -114,7 +114,7 @@
             <div class="demo-tab">Ask</div>
           </div>
           <div class="demo-divider"></div>
-          <div class="hf-remocn-shared-axis-y">
+          <div class="hf-catalog-shared-axis-y">
             <span>Plan</span><span>Debug</span><span>Ask</span>
           </div>
         </div>
@@ -123,7 +123,7 @@
         const tl = gsap.timeline({ paused: true });
         const startTime = 0.5;
         tl.fromTo(
-          ".hf-remocn-shared-axis-y span",
+          ".hf-catalog-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-y/registry-item.json b/registry/components/shared-axis-y/registry-item.json
index c08e02ea15..c1224d0dcd 100644
--- a/registry/components/shared-axis-y/registry-item.json
+++ b/registry/components/shared-axis-y/registry-item.json
@@ -4,7 +4,7 @@
   "type": "hyperframes:component",
   "title": "Shared Axis Y",
   "description": "Per-word vertical shared-axis transition for sharp editorial swaps.",
-  "tags": ["motion-primitive", "remocn-port", "typography"],
+  "tags": ["motion-primitive", "typography"],
   "files": [
     {
       "path": "shared-axis-y.html",
diff --git a/registry/components/shared-axis-y/shared-axis-y.html b/registry/components/shared-axis-y/shared-axis-y.html
index 24ad84d168..ba34f70695 100644
--- a/registry/components/shared-axis-y/shared-axis-y.html
+++ b/registry/components/shared-axis-y/shared-axis-y.html
@@ -1,5 +1,5 @@
 <!--
-  Shared Axis Y - remocn typography primitive for HyperFrames.
+  Shared Axis Y - 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.
@@ -23,7 +23,7 @@
 -->
 
 <div
-  class="hf-remocn-shared-axis-y"
+  class="hf-catalog-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" }] },
@@ -34,19 +34,19 @@
 </div>
 
 <style>
-  .hf-remocn-shared-axis-y {
+  .hf-catalog-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 {
+  .hf-catalog-shared-axis-y {
     display: inline-flex;
     gap: 12px;
     font-size: 56px;
     line-height: 1;
   }
-  .hf-remocn-shared-axis-y span {
+  .hf-catalog-shared-axis-y span {
     display: inline-block;
     transform: translate(
         var(--hf-word-x, 0px),
@@ -84,7 +84,7 @@
     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");
+    var roots = document.querySelectorAll(".hf-catalog-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);
@@ -94,5 +94,5 @@
 
 <!--
   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);
+  tl.fromTo('.hf-catalog-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
index 0f8df98ef7..cf4e7131c1 100644
--- a/registry/components/shared-axis-z/demo.html
+++ b/registry/components/shared-axis-z/demo.html
@@ -122,8 +122,8 @@
         text-transform: uppercase;
         color: #71717a;
       }
-      /* GSAP animates .hf-remocn-shared-axis-z span — must keep class + span structure */
-      .hf-remocn-shared-axis-z {
+      /* GSAP animates .hf-catalog-shared-axis-z span — must keep class + span structure */
+      .hf-catalog-shared-axis-z {
         display: inline-flex;
         gap: 10px;
         font-size: 36px;
@@ -132,7 +132,7 @@
         line-height: 1;
         color: #18181b;
       }
-      .hf-remocn-shared-axis-z span {
+      .hf-catalog-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));
@@ -215,7 +215,7 @@
           <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="hf-catalog-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.
@@ -261,7 +261,7 @@
 
         // Word-by-word reveal on the title
         tl.fromTo(
-          ".hf-remocn-shared-axis-z span",
+          ".hf-catalog-shared-axis-z span",
           { opacity: 0, "--hf-word-scale": 0.72 },
           {
             opacity: 1,
diff --git a/registry/components/shared-axis-z/registry-item.json b/registry/components/shared-axis-z/registry-item.json
index a66e4da22a..122202e39c 100644
--- a/registry/components/shared-axis-z/registry-item.json
+++ b/registry/components/shared-axis-z/registry-item.json
@@ -4,7 +4,7 @@
   "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"],
+  "tags": ["motion-primitive", "typography"],
   "files": [
     {
       "path": "shared-axis-z.html",
diff --git a/registry/components/shared-axis-z/shared-axis-z.html b/registry/components/shared-axis-z/shared-axis-z.html
index 127c1094ab..bdb2ea8457 100644
--- a/registry/components/shared-axis-z/shared-axis-z.html
+++ b/registry/components/shared-axis-z/shared-axis-z.html
@@ -1,5 +1,5 @@
 <!--
-  Shared Axis Z - remocn typography primitive for HyperFrames.
+  Shared Axis Z - 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.
@@ -25,7 +25,7 @@
 -->
 
 <div
-  class="hf-remocn-shared-axis-z"
+  class="hf-catalog-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" }] },
@@ -36,19 +36,19 @@
 </div>
 
 <style>
-  .hf-remocn-shared-axis-z {
+  .hf-catalog-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 {
+  .hf-catalog-shared-axis-z {
     display: inline-flex;
     gap: 12px;
     font-size: 56px;
     line-height: 1;
   }
-  .hf-remocn-shared-axis-z span {
+  .hf-catalog-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)));
@@ -83,7 +83,7 @@
     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");
+    var roots = document.querySelectorAll(".hf-catalog-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);
@@ -93,5 +93,5 @@
 
 <!--
   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);
+  tl.fromTo('.hf-catalog-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/registry-item.json b/registry/components/signup-flow/registry-item.json
index c8a9dfabf3..8cf1190bfd 100644
--- a/registry/components/signup-flow/registry-item.json
+++ b/registry/components/signup-flow/registry-item.json
@@ -4,7 +4,7 @@
   "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"],
+  "tags": ["ui-flow", "signup", "form"],
   "files": [
     {
       "path": "signup-flow.html",
diff --git a/registry/components/signup-flow/signup-flow.html b/registry/components/signup-flow/signup-flow.html
index e9246999de..1e4a867adf 100644
--- a/registry/components/signup-flow/signup-flow.html
+++ b/registry/components/signup-flow/signup-flow.html
@@ -1,5 +1,5 @@
 <!--
-  Signup Flow - Remocn-inspired composed UI flow for HyperFrames.
+  Signup Flow - 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.
diff --git a/registry/components/slot-machine-roll/demo.html b/registry/components/slot-machine-roll/demo.html
index e56654bc6d..f51cf52b60 100644
--- a/registry/components/slot-machine-roll/demo.html
+++ b/registry/components/slot-machine-roll/demo.html
@@ -52,13 +52,13 @@
         text-transform: uppercase;
         color: #71717a;
       }
-      .hf-remocn-slot-machine-roll {
+      .hf-catalog-slot-machine-roll {
         color: #18181b;
         font-family: Inter, system-ui, sans-serif;
         font-weight: 900;
         letter-spacing: -0.04em;
       }
-      .hf-remocn-slot-machine-roll {
+      .hf-catalog-slot-machine-roll {
         display: inline-flex;
         gap: 6px;
         height: 74px;
@@ -69,12 +69,12 @@
           Menlo,
           monospace;
       }
-      .hf-remocn-slot-machine-roll span {
+      .hf-catalog-slot-machine-roll span {
         display: block;
         height: 74px;
         overflow: hidden;
       }
-      .hf-remocn-slot-machine-roll i {
+      .hf-catalog-slot-machine-roll i {
         display: block;
         font-style: normal;
         transform: translateY(var(--hf-slot-y, 0px));
@@ -93,7 +93,7 @@
       <div class="demo-frame">
         <div class="slot-card">
           <div class="slot-label">Slot Machine Roll</div>
-          <div class="hf-remocn-slot-machine-roll">
+          <div class="hf-catalog-slot-machine-roll">
             <span
               ><i>0<br />A</i></span
             ><span
@@ -108,7 +108,7 @@
         const tl = gsap.timeline({ paused: true });
         const startTime = 0.5;
         tl.fromTo(
-          ".hf-remocn-slot-machine-roll i",
+          ".hf-catalog-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/slot-machine-roll/registry-item.json b/registry/components/slot-machine-roll/registry-item.json
index 66cc6ce95e..5deee51dcf 100644
--- a/registry/components/slot-machine-roll/registry-item.json
+++ b/registry/components/slot-machine-roll/registry-item.json
@@ -4,7 +4,7 @@
   "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"],
+  "tags": ["video-primitive", "motion-primitive", "typography"],
   "files": [
     {
       "path": "slot-machine-roll.html",
diff --git a/registry/components/slot-machine-roll/slot-machine-roll.html b/registry/components/slot-machine-roll/slot-machine-roll.html
index b724cc1c63..24f5ee2acf 100644
--- a/registry/components/slot-machine-roll/slot-machine-roll.html
+++ b/registry/components/slot-machine-roll/slot-machine-roll.html
@@ -1,5 +1,5 @@
 <!--
-  Slot Machine Roll - remocn typography primitive for HyperFrames.
+  Slot Machine Roll - 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.
@@ -27,7 +27,7 @@
 -->
 
 <div
-  class="hf-remocn-slot-machine-roll"
+  class="hf-catalog-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" }] },
@@ -45,13 +45,13 @@
 </div>
 
 <style>
-  .hf-remocn-slot-machine-roll {
+  .hf-catalog-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 {
+  .hf-catalog-slot-machine-roll {
     display: inline-flex;
     gap: 6px;
     height: var(--hf-slot-row, 74px);
@@ -62,12 +62,12 @@
       Menlo,
       monospace;
   }
-  .hf-remocn-slot-machine-roll span {
+  .hf-catalog-slot-machine-roll span {
     display: block;
     height: var(--hf-slot-row, 74px);
     overflow: hidden;
   }
-  .hf-remocn-slot-machine-roll i {
+  .hf-catalog-slot-machine-roll i {
     display: block;
     font-style: normal;
     transform: translateY(
@@ -107,7 +107,7 @@
     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");
+    var roots = document.querySelectorAll(".hf-catalog-slot-machine-roll");
     for (var i = 0; i < roots.length; i += 1) {
       var root = roots[i];
       root.style.setProperty("--hf-slot-row", row + "px");
@@ -132,5 +132,5 @@
 
 <!--
   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);
+  tl.fromTo('.hf-catalog-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/spotlight-card/demo.html b/registry/components/spotlight-card/demo.html
index 73305ef7b1..5621022ebe 100644
--- a/registry/components/spotlight-card/demo.html
+++ b/registry/components/spotlight-card/demo.html
@@ -31,7 +31,7 @@
         transform: scale(1.65);
         transform-origin: center center;
       }
-      .hf-remocn-spotlight-card {
+      .hf-catalog-spotlight-card {
         --hf-accent: var(--accent, #18181b);
         --hf-ink: #111827;
         --hf-muted: #6b7280;
@@ -39,7 +39,7 @@
         color: var(--hf-ink);
         font-family: Inter, system-ui, sans-serif;
       }
-      .hf-remocn-spotlight-card {
+      .hf-catalog-spotlight-card {
         position: relative;
         width: 760px;
         height: 428px;
@@ -48,7 +48,7 @@
         background: #080b12;
         box-shadow: 0 28px 80px rgba(15, 23, 42, 0.2);
       }
-      .hf-remocn-spotlight-card .mesh {
+      .hf-catalog-spotlight-card .mesh {
         position: absolute;
         inset: -22%;
         filter: blur(44px);
@@ -70,7 +70,7 @@
             transparent 34%
           );
       }
-      .hf-remocn-spotlight-card .card {
+      .hf-catalog-spotlight-card .card {
         position: absolute;
         inset: 74px 92px;
         border: 1px solid rgba(255, 255, 255, 0.16);
@@ -82,7 +82,7 @@
         text-align: center;
         overflow: hidden;
       }
-      .hf-remocn-spotlight-card .spot {
+      .hf-catalog-spotlight-card .spot {
         position: absolute;
         width: 260px;
         height: 260px;
@@ -91,7 +91,7 @@
         transform: translate(var(--hf-spot-x, 0px), var(--hf-spot-y, 0px));
         mix-blend-mode: screen;
       }
-      .hf-remocn-spotlight-card .particle {
+      .hf-catalog-spotlight-card .particle {
         position: absolute;
         left: 50%;
         top: 54%;
@@ -102,12 +102,12 @@
         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 {
+      .hf-catalog-spotlight-card h3 {
         margin: 0;
         font-size: 44px;
         letter-spacing: -0.04em;
       }
-      .hf-remocn-spotlight-card p {
+      .hf-catalog-spotlight-card p {
         margin: 8px 0 0;
         font-size: 18px;
         color: rgba(255, 255, 255, 0.7);
@@ -124,7 +124,7 @@
       data-duration="5"
     >
       <div class="demo-frame">
-        <div class="hf-remocn-spotlight-card">
+        <div class="hf-catalog-spotlight-card">
           <div class="mesh"></div>
           <div class="card">
             <div class="spot"></div>
@@ -139,7 +139,7 @@ <h3>Spotlight Card</h3>
         const tl = gsap.timeline({ paused: true });
         const startTime = 0.5;
         tl.fromTo(
-          ".hf-remocn-spotlight-card .mesh",
+          ".hf-catalog-spotlight-card .mesh",
           {
             "--hf-x1": "18%",
             "--hf-y1": "28%",
@@ -161,12 +161,12 @@ <h3>Spotlight Card</h3>
           startTime,
         );
         tl.fromTo(
-          ".hf-remocn-spotlight-card .spot",
+          ".hf-catalog-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");
+        const particles_spotlight_card = gsap.utils.toArray(".hf-catalog-spotlight-card .particle");
         if (particles_spotlight_card.length) {
           tl.fromTo(
             particles_spotlight_card,
diff --git a/registry/components/spotlight-card/registry-item.json b/registry/components/spotlight-card/registry-item.json
index 602e068f11..79a6f85ac2 100644
--- a/registry/components/spotlight-card/registry-item.json
+++ b/registry/components/spotlight-card/registry-item.json
@@ -4,7 +4,7 @@
   "type": "hyperframes:component",
   "title": "Spotlight Card",
   "description": "A card with a scripted cursor spotlight and lit border.",
-  "tags": ["effect", "remocn-port"],
+  "tags": ["effect"],
   "files": [
     {
       "path": "spotlight-card.html",
diff --git a/registry/components/spotlight-card/spotlight-card.html b/registry/components/spotlight-card/spotlight-card.html
index 24b96325f4..efe80524ad 100644
--- a/registry/components/spotlight-card/spotlight-card.html
+++ b/registry/components/spotlight-card/spotlight-card.html
@@ -1,11 +1,11 @@
 <!--
-  Spotlight Card - remocn component ported to HyperFrames authoring format.
+  Spotlight Card - catalog component for HyperFrames.
 
   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="hf-catalog-spotlight-card">
   <div class="mesh"></div>
   <div class="card">
     <div class="spot"></div>
@@ -17,7 +17,7 @@ <h3>Spotlight Card</h3>
 </div>
 
 <style>
-  .hf-remocn-spotlight-card {
+  .hf-catalog-spotlight-card {
     --hf-accent: var(--accent, #18181b);
     --hf-ink: #111827;
     --hf-muted: #6b7280;
@@ -25,7 +25,7 @@ <h3>Spotlight Card</h3>
     color: var(--hf-ink);
     font-family: Inter, system-ui, sans-serif;
   }
-  .hf-remocn-spotlight-card {
+  .hf-catalog-spotlight-card {
     position: relative;
     width: 760px;
     height: 428px;
@@ -34,7 +34,7 @@ <h3>Spotlight Card</h3>
     background: #080b12;
     box-shadow: 0 28px 80px rgba(15, 23, 42, 0.2);
   }
-  .hf-remocn-spotlight-card .mesh {
+  .hf-catalog-spotlight-card .mesh {
     position: absolute;
     inset: -22%;
     filter: blur(44px);
@@ -56,7 +56,7 @@ <h3>Spotlight Card</h3>
         transparent 34%
       );
   }
-  .hf-remocn-spotlight-card .card {
+  .hf-catalog-spotlight-card .card {
     position: absolute;
     inset: 74px 92px;
     border: 1px solid rgba(255, 255, 255, 0.16);
@@ -68,7 +68,7 @@ <h3>Spotlight Card</h3>
     text-align: center;
     overflow: hidden;
   }
-  .hf-remocn-spotlight-card .spot {
+  .hf-catalog-spotlight-card .spot {
     position: absolute;
     width: 260px;
     height: 260px;
@@ -77,7 +77,7 @@ <h3>Spotlight Card</h3>
     transform: translate(var(--hf-spot-x, 0px), var(--hf-spot-y, 0px));
     mix-blend-mode: screen;
   }
-  .hf-remocn-spotlight-card .particle {
+  .hf-catalog-spotlight-card .particle {
     position: absolute;
     left: 50%;
     top: 54%;
@@ -88,12 +88,12 @@ <h3>Spotlight Card</h3>
     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 {
+  .hf-catalog-spotlight-card h3 {
     margin: 0;
     font-size: 44px;
     letter-spacing: -0.04em;
   }
-  .hf-remocn-spotlight-card p {
+  .hf-catalog-spotlight-card p {
     margin: 8px 0 0;
     color: rgba(255, 255, 255, 0.7);
   }
@@ -101,5 +101,5 @@ <h3>Spotlight Card</h3>
 
 <!--
   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); }
+  tl.fromTo('.hf-catalog-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-catalog-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-catalog-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/staggered-fade-up/demo.html b/registry/components/staggered-fade-up/demo.html
index e49b828ec3..71fbab2e7c 100644
--- a/registry/components/staggered-fade-up/demo.html
+++ b/registry/components/staggered-fade-up/demo.html
@@ -40,13 +40,13 @@
         text-transform: uppercase;
         color: var(--muted, #71717a);
       }
-      .hf-remocn-staggered-fade-up {
+      .hf-catalog-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 {
+      .hf-catalog-staggered-fade-up {
         display: flex;
         flex-wrap: wrap;
         gap: 14px 18px;
@@ -55,7 +55,7 @@
         max-width: 680px;
         justify-content: center;
       }
-      .hf-remocn-staggered-fade-up span {
+      .hf-catalog-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));
@@ -75,7 +75,7 @@
     >
       <div class="demo-frame">
         <div class="demo-label">staggered fade up</div>
-        <div class="hf-remocn-staggered-fade-up">
+        <div class="hf-catalog-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>
@@ -84,7 +84,7 @@
         const tl = gsap.timeline({ paused: true });
         const startTime = 0.4;
         tl.fromTo(
-          ".hf-remocn-staggered-fade-up span",
+          ".hf-catalog-staggered-fade-up span",
           { opacity: 0, "--hf-word-y": "28px", "--hf-word-scale": 0.92, "--hf-word-blur": "6px" },
           {
             opacity: 1,
diff --git a/registry/components/staggered-fade-up/registry-item.json b/registry/components/staggered-fade-up/registry-item.json
index d899179f35..c32528e36e 100644
--- a/registry/components/staggered-fade-up/registry-item.json
+++ b/registry/components/staggered-fade-up/registry-item.json
@@ -4,7 +4,7 @@
   "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"],
+  "tags": ["video-primitive", "motion-primitive", "typography"],
   "files": [
     {
       "path": "staggered-fade-up.html",
diff --git a/registry/components/staggered-fade-up/staggered-fade-up.html b/registry/components/staggered-fade-up/staggered-fade-up.html
index 0bfda1ff5b..8547990f48 100644
--- a/registry/components/staggered-fade-up/staggered-fade-up.html
+++ b/registry/components/staggered-fade-up/staggered-fade-up.html
@@ -1,5 +1,5 @@
 <!--
-  Staggered Fade Up - remocn typography primitive for HyperFrames.
+  Staggered Fade Up - 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.
@@ -28,7 +28,7 @@
 -->
 
 <div
-  class="hf-remocn-staggered-fade-up"
+  class="hf-catalog-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" }] },
@@ -40,19 +40,19 @@
 </div>
 
 <style>
-  .hf-remocn-staggered-fade-up {
+  .hf-catalog-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 {
+  .hf-catalog-staggered-fade-up {
     display: inline-flex;
     gap: var(--space-1, 12px);
     font-size: 56px;
     line-height: 1;
   }
-  .hf-remocn-staggered-fade-up span {
+  .hf-catalog-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)),
@@ -97,7 +97,7 @@
     var words =
       typeof vars.words === "string" && vars.words.trim() ? vars.words.trim().split(/\s+/) : null;
 
-    var roots = document.querySelectorAll(".hf-remocn-staggered-fade-up");
+    var roots = document.querySelectorAll(".hf-catalog-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));
@@ -116,5 +116,5 @@
 
 <!--
   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);
+  tl.fromTo('.hf-catalog-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/strikethrough-replace/demo.html b/registry/components/strikethrough-replace/demo.html
index 785723172c..2b0b8add75 100644
--- a/registry/components/strikethrough-replace/demo.html
+++ b/registry/components/strikethrough-replace/demo.html
@@ -33,13 +33,13 @@
         /* ponytail: scale non-GSAP wrapper; GSAP targets are children */
         transform: scale(2.8);
       }
-      .hf-remocn-strikethrough-replace {
+      .hf-catalog-strikethrough-replace {
         color: #18181b;
         font-family: Inter, system-ui, sans-serif;
         font-weight: 900;
         letter-spacing: -0.04em;
       }
-      .hf-remocn-strikethrough-replace {
+      .hf-catalog-strikethrough-replace {
         position: relative;
         display: inline-grid;
         grid-auto-flow: column;
@@ -47,7 +47,7 @@
         align-items: center;
         font-size: 58px;
       }
-      .hf-remocn-strikethrough-replace i {
+      .hf-catalog-strikethrough-replace i {
         position: absolute;
         left: 0;
         width: 48%;
@@ -57,7 +57,7 @@
         transform: scaleX(var(--hf-strike-progress, 1));
         transform-origin: left center;
       }
-      .hf-remocn-strikethrough-replace strong {
+      .hf-catalog-strikethrough-replace strong {
         opacity: var(--hf-replace-opacity, 1);
       }
     </style>
@@ -72,7 +72,7 @@
       data-duration="5"
     >
       <div class="demo-frame">
-        <div class="hf-remocn-strikethrough-replace">
+        <div class="hf-catalog-strikethrough-replace">
           <span>Slow</span><i></i><strong>Fast</strong>
         </div>
       </div>
@@ -80,13 +80,13 @@
         const tl = gsap.timeline({ paused: true });
         const startTime = 0.5;
         tl.fromTo(
-          ".hf-remocn-strikethrough-replace i",
+          ".hf-catalog-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-catalog-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/strikethrough-replace/registry-item.json b/registry/components/strikethrough-replace/registry-item.json
index 9bdb46afea..5b0aeb2948 100644
--- a/registry/components/strikethrough-replace/registry-item.json
+++ b/registry/components/strikethrough-replace/registry-item.json
@@ -4,7 +4,7 @@
   "type": "hyperframes:component",
   "title": "Strikethrough Replace",
   "description": "Draw a strike line across old text, then reveal the replacement.",
-  "tags": ["motion-primitive", "remocn-port", "typography"],
+  "tags": ["motion-primitive", "typography"],
   "files": [
     {
       "path": "strikethrough-replace.html",
diff --git a/registry/components/strikethrough-replace/strikethrough-replace.html b/registry/components/strikethrough-replace/strikethrough-replace.html
index 5418867da8..33b5657c96 100644
--- a/registry/components/strikethrough-replace/strikethrough-replace.html
+++ b/registry/components/strikethrough-replace/strikethrough-replace.html
@@ -1,5 +1,5 @@
 <!--
-  Strikethrough Replace - remocn typography primitive for HyperFrames.
+  Strikethrough Replace - 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.
@@ -27,7 +27,7 @@
 -->
 
 <div
-  class="hf-remocn-strikethrough-replace"
+  class="hf-catalog-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" }] },
@@ -39,13 +39,13 @@
 </div>
 
 <style>
-  .hf-remocn-strikethrough-replace {
+  .hf-catalog-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 {
+  .hf-catalog-strikethrough-replace {
     position: relative;
     display: inline-grid;
     grid-auto-flow: column;
@@ -53,7 +53,7 @@
     align-items: center;
     font-size: 58px;
   }
-  .hf-remocn-strikethrough-replace i {
+  .hf-catalog-strikethrough-replace i {
     position: absolute;
     left: 0;
     width: 48%;
@@ -63,7 +63,7 @@
     transform: scaleX(var(--hf-strike-progress, 1));
     transform-origin: var(--hf-strike-origin, left center);
   }
-  .hf-remocn-strikethrough-replace strong {
+  .hf-catalog-strikethrough-replace strong {
     opacity: var(--hf-replace-opacity, 1);
   }
 </style>
@@ -97,7 +97,7 @@
     var tint = tints[pick(tints, vars.tint, "red")];
     var tone = tones[pick(tones, vars.tone, "ink")];
 
-    var roots = document.querySelectorAll(".hf-remocn-strikethrough-replace");
+    var roots = document.querySelectorAll(".hf-catalog-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);
@@ -109,5 +109,5 @@
 
 <!--
   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);
+  tl.fromTo('.hf-catalog-strikethrough-replace i', { '--hf-strike-progress': 0 }, { '--hf-strike-progress': 1, duration: 0.28, ease: 'power2.out' }, startTime); tl.fromTo('.hf-catalog-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/terminal-simulator/demo.html b/registry/components/terminal-simulator/demo.html
index de70808a89..741ddddff7 100644
--- a/registry/components/terminal-simulator/demo.html
+++ b/registry/components/terminal-simulator/demo.html
@@ -31,7 +31,7 @@
         /* ponytail: scale wrapper (not a GSAP target) to fill ~65% of frame */
         transform: scale(1.65);
       }
-      .hf-remocn-terminal-simulator {
+      .hf-catalog-terminal-simulator {
         --hf-accent: var(--accent, #18181b);
         --hf-ink: #111827;
         --hf-muted: #6b7280;
@@ -39,7 +39,7 @@
         color: var(--hf-ink);
         font-family: Inter, system-ui, sans-serif;
       }
-      .hf-remocn-terminal-simulator {
+      .hf-catalog-terminal-simulator {
         width: 760px;
         border-radius: 24px;
         overflow: hidden;
@@ -48,7 +48,7 @@
         box-shadow: 0 28px 80px rgba(15, 23, 42, 0.2);
         font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
       }
-      .hf-remocn-terminal-simulator .chrome {
+      .hf-catalog-terminal-simulator .chrome {
         height: 48px;
         display: flex;
         align-items: center;
@@ -58,7 +58,7 @@
         color: #94a3b8;
         font-size: 14px;
       }
-      .hf-remocn-terminal-simulator .dot {
+      .hf-catalog-terminal-simulator .dot {
         width: 11px;
         height: 11px;
         border-radius: 999px;
@@ -67,24 +67,24 @@
           18px 0 #f59e0b,
           36px 0 #22c55e;
       }
-      .hf-remocn-terminal-simulator .body {
+      .hf-catalog-terminal-simulator .body {
         display: grid;
         grid-template-columns: 210px 1fr;
         min-height: 340px;
       }
-      .hf-remocn-terminal-simulator .files {
+      .hf-catalog-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 {
+      .hf-catalog-terminal-simulator .editor {
         padding: 22px;
         display: grid;
         gap: 14px;
       }
-      .hf-remocn-terminal-simulator .line {
+      .hf-catalog-terminal-simulator .line {
         display: block;
         height: 18px;
         border-radius: 999px;
@@ -93,7 +93,7 @@
         transform-origin: left center;
         opacity: var(--hf-line-opacity, 1);
       }
-      .hf-remocn-terminal-simulator .terminal {
+      .hf-catalog-terminal-simulator .terminal {
         padding: 18px 22px 24px;
         border-top: 1px solid rgba(148, 163, 184, 0.18);
         color: #86efac;
@@ -112,7 +112,7 @@
       data-duration="5"
     >
       <div class="demo-frame">
-        <div class="hf-remocn-terminal-simulator">
+        <div class="hf-catalog-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>
@@ -131,7 +131,7 @@
         const tl = gsap.timeline({ paused: true });
         const startTime = 0.5;
         tl.fromTo(
-          ".hf-remocn-terminal-simulator .line",
+          ".hf-catalog-terminal-simulator .line",
           { "--hf-line": 0, "--hf-line-opacity": 0 },
           {
             "--hf-line": 1,
@@ -143,7 +143,7 @@
           startTime,
         );
         tl.fromTo(
-          ".hf-remocn-terminal-simulator .terminal",
+          ".hf-catalog-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/terminal-simulator/registry-item.json b/registry/components/terminal-simulator/registry-item.json
index 633e263c86..01fb4a91c8 100644
--- a/registry/components/terminal-simulator/registry-item.json
+++ b/registry/components/terminal-simulator/registry-item.json
@@ -4,7 +4,7 @@
   "type": "hyperframes:component",
   "title": "Terminal Simulator",
   "description": "A terminal window types commands and streams log output.",
-  "tags": ["code-animation", "remocn-port"],
+  "tags": ["code-animation"],
   "files": [
     {
       "path": "terminal-simulator.html",
diff --git a/registry/components/terminal-simulator/terminal-simulator.html b/registry/components/terminal-simulator/terminal-simulator.html
index 1cb4dcf1b4..08a17ec747 100644
--- a/registry/components/terminal-simulator/terminal-simulator.html
+++ b/registry/components/terminal-simulator/terminal-simulator.html
@@ -1,11 +1,11 @@
 <!--
-  Terminal Simulator - remocn component ported to HyperFrames authoring format.
+  Terminal Simulator - catalog component for HyperFrames.
 
   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="hf-catalog-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>
@@ -19,7 +19,7 @@
 </div>
 
 <style>
-  .hf-remocn-terminal-simulator {
+  .hf-catalog-terminal-simulator {
     --hf-accent: var(--accent, #18181b);
     --hf-ink: #111827;
     --hf-muted: #6b7280;
@@ -27,7 +27,7 @@
     color: var(--hf-ink);
     font-family: Inter, system-ui, sans-serif;
   }
-  .hf-remocn-terminal-simulator {
+  .hf-catalog-terminal-simulator {
     width: 760px;
     border-radius: 24px;
     overflow: hidden;
@@ -36,7 +36,7 @@
     box-shadow: 0 28px 80px rgba(15, 23, 42, 0.2);
     font-family: ui-monospace, Menlo, monospace;
   }
-  .hf-remocn-terminal-simulator .chrome {
+  .hf-catalog-terminal-simulator .chrome {
     height: 48px;
     display: flex;
     align-items: center;
@@ -45,7 +45,7 @@
     background: #111827;
     color: #94a3b8;
   }
-  .hf-remocn-terminal-simulator .dot {
+  .hf-catalog-terminal-simulator .dot {
     width: 11px;
     height: 11px;
     border-radius: 999px;
@@ -54,22 +54,22 @@
       18px 0 #f59e0b,
       36px 0 #22c55e;
   }
-  .hf-remocn-terminal-simulator .body {
+  .hf-catalog-terminal-simulator .body {
     display: grid;
     grid-template-columns: 210px 1fr;
     min-height: 340px;
   }
-  .hf-remocn-terminal-simulator .files {
+  .hf-catalog-terminal-simulator .files {
     padding: 22px;
     border-right: 1px solid rgba(148, 163, 184, 0.18);
     color: #94a3b8;
   }
-  .hf-remocn-terminal-simulator .editor {
+  .hf-catalog-terminal-simulator .editor {
     padding: 22px;
     display: grid;
     gap: 12px;
   }
-  .hf-remocn-terminal-simulator .line {
+  .hf-catalog-terminal-simulator .line {
     display: block;
     height: 16px;
     border-radius: 999px;
@@ -78,7 +78,7 @@
     transform-origin: left center;
     opacity: var(--hf-line-opacity, 1);
   }
-  .hf-remocn-terminal-simulator .terminal {
+  .hf-catalog-terminal-simulator .terminal {
     padding: 18px 22px 24px;
     border-top: 1px solid rgba(148, 163, 184, 0.18);
     color: #86efac;
@@ -88,5 +88,5 @@
 
 <!--
   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);
+  tl.fromTo('.hf-catalog-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-catalog-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/top-down-letters/demo.html b/registry/components/top-down-letters/demo.html
index a660118401..8822d9c6a6 100644
--- a/registry/components/top-down-letters/demo.html
+++ b/registry/components/top-down-letters/demo.html
@@ -33,20 +33,20 @@
         /* ponytail: scale wrapper (not a GSAP target) to fill ~65% of frame width */
         transform: scale(3.2);
       }
-      .hf-remocn-top-down-letters {
+      .hf-catalog-top-down-letters {
         color: #18181b;
         font-family: Inter, system-ui, sans-serif;
         font-weight: 900;
         letter-spacing: -0.04em;
       }
-      .hf-remocn-top-down-letters {
+      .hf-catalog-top-down-letters {
         display: inline-flex;
         gap: 1px;
         font-size: 74px;
         line-height: 0.9;
         overflow: hidden;
       }
-      .hf-remocn-top-down-letters span {
+      .hf-catalog-top-down-letters span {
         display: inline-block;
         transform: translateY(var(--hf-char-y, 0px));
         will-change: transform, opacity;
@@ -63,7 +63,7 @@
       data-duration="5"
     >
       <div class="demo-frame">
-        <div class="hf-remocn-top-down-letters">
+        <div class="hf-catalog-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>
@@ -72,7 +72,7 @@
         const tl = gsap.timeline({ paused: true });
         const startTime = 0.5;
         tl.fromTo(
-          ".hf-remocn-top-down-letters span",
+          ".hf-catalog-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/top-down-letters/registry-item.json b/registry/components/top-down-letters/registry-item.json
index 746d2d54da..c314fa67ee 100644
--- a/registry/components/top-down-letters/registry-item.json
+++ b/registry/components/top-down-letters/registry-item.json
@@ -4,7 +4,7 @@
   "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"],
+  "tags": ["video-primitive", "motion-primitive", "typography"],
   "files": [
     {
       "path": "top-down-letters.html",
diff --git a/registry/components/top-down-letters/top-down-letters.html b/registry/components/top-down-letters/top-down-letters.html
index 728e318725..94d043f5ac 100644
--- a/registry/components/top-down-letters/top-down-letters.html
+++ b/registry/components/top-down-letters/top-down-letters.html
@@ -1,5 +1,5 @@
 <!--
-  Top-Down Letters - remocn typography primitive for HyperFrames.
+  Top-Down Letters - 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.
@@ -28,7 +28,7 @@
 -->
 
 <div
-  class="hf-remocn-top-down-letters"
+  class="hf-catalog-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" }] },
@@ -39,20 +39,20 @@
 </div>
 
 <style>
-  .hf-remocn-top-down-letters {
+  .hf-catalog-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 {
+  .hf-catalog-top-down-letters {
     display: inline-flex;
     gap: 1px;
     font-size: 74px;
     line-height: 0.9;
     overflow: hidden;
   }
-  .hf-remocn-top-down-letters span {
+  .hf-catalog-top-down-letters span {
     display: inline-block;
     transform: translateY(calc(var(--hf-char-y, 0px) * var(--hf-char-distance, 1)));
     will-change: transform, opacity;
@@ -84,7 +84,7 @@
     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");
+    var roots = document.querySelectorAll(".hf-catalog-top-down-letters");
     for (var i = 0; i < roots.length; i += 1) {
       var root = roots[i];
       root.style.setProperty("--hf-char-distance", String(distance));
@@ -108,5 +108,5 @@
 
 <!--
   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);
+  tl.fromTo('.hf-catalog-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/typewriter/demo.html b/registry/components/typewriter/demo.html
index 6d2f1ee54e..c3cb534f69 100644
--- a/registry/components/typewriter/demo.html
+++ b/registry/components/typewriter/demo.html
@@ -30,16 +30,16 @@
         min-width: 900px;
         min-height: 500px;
         padding: 64px;
-        /* ponytail: scale-up only; GSAP targets .hf-remocn-typewriter with CSS vars, not transforms */
+        /* ponytail: scale-up only; GSAP targets .hf-catalog-typewriter with CSS vars, not transforms */
         transform: scale(2);
       }
-      .hf-remocn-typewriter {
+      .hf-catalog-typewriter {
         color: #18181b;
         font-family: Inter, system-ui, sans-serif;
         font-weight: 900;
         letter-spacing: -0.04em;
       }
-      .hf-remocn-typewriter {
+      .hf-catalog-typewriter {
         display: inline-flex;
         align-items: center;
         gap: 6px;
@@ -49,13 +49,13 @@
           Menlo,
           monospace;
       }
-      .hf-remocn-typewriter span {
+      .hf-catalog-typewriter span {
         display: inline-block;
         max-width: calc(var(--hf-type-progress, 1) * 100%);
         overflow: hidden;
         white-space: nowrap;
       }
-      .hf-remocn-typewriter i {
+      .hf-catalog-typewriter i {
         width: 3px;
         height: 52px;
         border-radius: 999px;
@@ -74,19 +74,19 @@
       data-duration="5"
     >
       <div class="demo-frame">
-        <div class="hf-remocn-typewriter"><span>hyperframes add typewriter</span><i></i></div>
+        <div class="hf-catalog-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-catalog-typewriter",
           { "--hf-type-progress": 0 },
           { "--hf-type-progress": 1, duration: 1.2, ease: "steps(28)" },
           startTime,
         );
         tl.to(
-          ".hf-remocn-typewriter i",
+          ".hf-catalog-typewriter i",
           { "--hf-caret-opacity": 0.2, duration: 0.24, repeat: 7, yoyo: true, ease: "none" },
           startTime + 0.2,
         );
diff --git a/registry/components/typewriter/registry-item.json b/registry/components/typewriter/registry-item.json
index e16ef0f54d..0f557a828d 100644
--- a/registry/components/typewriter/registry-item.json
+++ b/registry/components/typewriter/registry-item.json
@@ -4,7 +4,7 @@
   "type": "hyperframes:component",
   "title": "Typewriter",
   "description": "Character-by-character text reveal with a deterministic blinking cursor.",
-  "tags": ["video-primitive", "motion-primitive", "remocn-port", "typography"],
+  "tags": ["video-primitive", "motion-primitive", "typography"],
   "files": [
     {
       "path": "typewriter.html",
diff --git a/registry/components/typewriter/typewriter.html b/registry/components/typewriter/typewriter.html
index eff0115b1f..08dfbe9308 100644
--- a/registry/components/typewriter/typewriter.html
+++ b/registry/components/typewriter/typewriter.html
@@ -1,5 +1,5 @@
 <!--
-  Typewriter - remocn typography primitive for HyperFrames.
+  Typewriter - 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.
@@ -28,7 +28,7 @@
 -->
 
 <div
-  class="hf-remocn-typewriter"
+  class="hf-catalog-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" }] },
@@ -39,13 +39,13 @@
 </div>
 
 <style>
-  .hf-remocn-typewriter {
+  .hf-catalog-typewriter {
     color: var(--hf-type-color, #18181b);
     font-family: Inter, system-ui, sans-serif;
     font-weight: 900;
     letter-spacing: -0.04em;
   }
-  .hf-remocn-typewriter {
+  .hf-catalog-typewriter {
     display: inline-flex;
     align-items: center;
     gap: 4px;
@@ -55,13 +55,13 @@
       Menlo,
       monospace;
   }
-  .hf-remocn-typewriter span {
+  .hf-catalog-typewriter span {
     display: inline-block;
     max-width: calc(var(--hf-type-progress, 1) * 100%);
     overflow: hidden;
     white-space: nowrap;
   }
-  .hf-remocn-typewriter i {
+  .hf-catalog-typewriter i {
     display: var(--hf-caret-display, block);
     width: var(--hf-caret-width, 3px);
     height: 42px;
@@ -100,7 +100,7 @@
     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");
+    var roots = document.querySelectorAll(".hf-catalog-typewriter");
     for (var i = 0; i < roots.length; i += 1) {
       var root = roots[i];
       root.style.setProperty("--hf-type-color", tone);
@@ -117,5 +117,5 @@
 
 <!--
   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);
+  tl.fromTo('.hf-catalog-typewriter', { '--hf-type-progress': 0 }, { '--hf-type-progress': 1, duration: 1.2, ease: 'steps(28)' }, startTime); tl.to('.hf-catalog-typewriter i', { '--hf-caret-opacity': 0.2, duration: 0.24, repeat: 7, yoyo: true, ease: 'none' }, startTime + 0.2);
 -->
diff --git a/registry/components/x-follow-card/demo.html b/registry/components/x-follow-card/demo.html
index 108c309f58..93e25fe6c4 100644
--- a/registry/components/x-follow-card/demo.html
+++ b/registry/components/x-follow-card/demo.html
@@ -32,7 +32,7 @@
         transform: scale(1.9);
         transform-origin: center center;
       }
-      .hf-remocn-x-follow-card {
+      .hf-catalog-x-follow-card {
         --hf-accent: var(--accent, #f8fafc);
         --hf-ink: #111827;
         --hf-l1: rgba(255, 255, 255, 0.72);
@@ -42,7 +42,7 @@
         color: var(--hf-ink);
         font-family: Inter, system-ui, sans-serif;
       }
-      .hf-remocn-x-follow-card {
+      .hf-catalog-x-follow-card {
         width: 700px;
         border-radius: 30px;
         padding: 34px;
@@ -50,39 +50,39 @@
         color: #fff;
         box-shadow: 0 28px 80px rgba(15, 23, 42, 0.2);
       }
-      .hf-remocn-x-follow-card header {
+      .hf-catalog-x-follow-card header {
         display: flex;
         align-items: center;
         gap: 16px;
       }
-      .hf-remocn-x-follow-card .avatar {
+      .hf-catalog-x-follow-card .avatar {
         width: 70px;
         height: 70px;
         border-radius: 22px;
         background: var(--hf-l1);
       }
-      .hf-remocn-x-follow-card h3 {
+      .hf-catalog-x-follow-card h3 {
         margin: 0;
         font-size: 36px;
         letter-spacing: -0.04em;
       }
-      .hf-remocn-x-follow-card p {
+      .hf-catalog-x-follow-card p {
         color: #94a3b8;
         margin: 4px 0 0;
         font-size: 18px;
       }
-      .hf-remocn-x-follow-card .stat {
+      .hf-catalog-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 {
+      .hf-catalog-x-follow-card .avatars {
         display: flex;
         margin-top: 18px;
       }
-      .hf-remocn-x-follow-card .avatars span {
+      .hf-catalog-x-follow-card .avatars span {
         width: 46px;
         height: 46px;
         border-radius: 999px;
@@ -104,7 +104,7 @@
       data-duration="5"
     >
       <div class="demo-frame">
-        <div class="hf-remocn-x-follow-card">
+        <div class="hf-catalog-x-follow-card">
           <header>
             <div class="avatar"></div>
             <div>
@@ -124,13 +124,13 @@ <h3>X Follow Card</h3>
         const tl = gsap.timeline({ paused: true });
         const startTime = 0.5;
         tl.fromTo(
-          ".hf-remocn-x-follow-card .stat",
+          ".hf-catalog-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-catalog-x-follow-card .avatars span",
           { "--hf-avatar-y": "18px", "--hf-avatar-opacity": 0 },
           {
             "--hf-avatar-y": "0px",
diff --git a/registry/components/x-follow-card/registry-item.json b/registry/components/x-follow-card/registry-item.json
index e8ba202ab8..00887bc8a9 100644
--- a/registry/components/x-follow-card/registry-item.json
+++ b/registry/components/x-follow-card/registry-item.json
@@ -4,7 +4,7 @@
   "type": "hyperframes:component",
   "title": "X Follow Card",
   "description": "A social follow card with avatar, handle, and follower motion.",
-  "tags": ["social-overlay", "remocn-port"],
+  "tags": ["social-overlay"],
   "files": [
     {
       "path": "x-follow-card.html",
diff --git a/registry/components/x-follow-card/x-follow-card.html b/registry/components/x-follow-card/x-follow-card.html
index cbe2398301..6d4669c965 100644
--- a/registry/components/x-follow-card/x-follow-card.html
+++ b/registry/components/x-follow-card/x-follow-card.html
@@ -1,11 +1,11 @@
 <!--
-  X Follow Card - remocn component ported to HyperFrames authoring format.
+  X Follow Card - catalog component for HyperFrames.
 
   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">
+<div class="hf-catalog-x-follow-card">
   <header>
     <div class="avatar"></div>
     <div>
@@ -22,7 +22,7 @@ <h3>X Follow Card</h3>
 </div>
 
 <style>
-  .hf-remocn-x-follow-card {
+  .hf-catalog-x-follow-card {
     --hf-accent: var(--accent, #f8fafc);
     --hf-ink: #111827;
     --hf-l1: rgba(255, 255, 255, 0.72);
@@ -32,7 +32,7 @@ <h3>X Follow Card</h3>
     color: var(--hf-ink);
     font-family: Inter, system-ui, sans-serif;
   }
-  .hf-remocn-x-follow-card {
+  .hf-catalog-x-follow-card {
     width: 700px;
     border-radius: 30px;
     padding: 34px;
@@ -40,38 +40,38 @@ <h3>X Follow Card</h3>
     color: #fff;
     box-shadow: 0 28px 80px rgba(15, 23, 42, 0.2);
   }
-  .hf-remocn-x-follow-card header {
+  .hf-catalog-x-follow-card header {
     display: flex;
     align-items: center;
     gap: 16px;
   }
-  .hf-remocn-x-follow-card .avatar {
+  .hf-catalog-x-follow-card .avatar {
     width: 70px;
     height: 70px;
     border-radius: 22px;
     background: var(--hf-l1);
   }
-  .hf-remocn-x-follow-card h3 {
+  .hf-catalog-x-follow-card h3 {
     margin: 0;
     font-size: 36px;
     letter-spacing: -0.04em;
   }
-  .hf-remocn-x-follow-card p {
+  .hf-catalog-x-follow-card p {
     color: #94a3b8;
     margin: 4px 0 0;
   }
-  .hf-remocn-x-follow-card .stat {
+  .hf-catalog-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 {
+  .hf-catalog-x-follow-card .avatars {
     display: flex;
     margin-top: 18px;
   }
-  .hf-remocn-x-follow-card .avatars span {
+  .hf-catalog-x-follow-card .avatars span {
     width: 46px;
     height: 46px;
     border-radius: 999px;
@@ -85,5 +85,5 @@ <h3>X Follow Card</h3>
 
 <!--
   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);
+  tl.fromTo('.hf-catalog-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-catalog-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/zoom-through-transition/demo.html b/registry/components/zoom-through-transition/demo.html
index 11a352ea1b..01c5959ab7 100644
--- a/registry/components/zoom-through-transition/demo.html
+++ b/registry/components/zoom-through-transition/demo.html
@@ -31,7 +31,7 @@
         /* ponytail: scale non-animated wrapper to fill ~65% of 1920×1080 */
         transform: scale(1.7);
       }
-      .hf-remocn-zoom-through-transition {
+      .hf-catalog-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);
@@ -43,7 +43,7 @@
         color: var(--hf-ink);
         font-family: Inter, system-ui, sans-serif;
       }
-      .hf-remocn-zoom-through-transition {
+      .hf-catalog-zoom-through-transition {
         position: relative;
         width: 760px;
         height: 428px;
@@ -52,7 +52,7 @@
         background: #111827;
         box-shadow: 0 28px 80px rgba(15, 23, 42, 0.2);
       }
-      .hf-remocn-zoom-through-transition .scene {
+      .hf-catalog-zoom-through-transition .scene {
         position: absolute;
         inset: 0;
         display: grid;
@@ -62,7 +62,7 @@
         letter-spacing: -0.05em;
         color: #fff;
       }
-      .hf-remocn-zoom-through-transition .from {
+      .hf-catalog-zoom-through-transition .from {
         background:
           repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 4px),
           var(--hf-l4);
@@ -70,7 +70,7 @@
           scale(var(--hf-from-scale, 1));
         filter: blur(var(--hf-from-blur, 0px));
       }
-      .hf-remocn-zoom-through-transition .to {
+      .hf-catalog-zoom-through-transition .to {
         background:
           repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 4px),
           var(--hf-l3);
@@ -81,14 +81,14 @@
             var(--hf-clip-left, 0%)
         );
       }
-      .hf-remocn-zoom-through-transition .fx {
+      .hf-catalog-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 {
+      .hf-catalog-zoom-through-transition .rgb {
         position: absolute;
         inset: 0;
         pointer-events: none;
@@ -113,7 +113,7 @@
       data-duration="5"
     >
       <div class="demo-frame">
-        <div class="hf-remocn-zoom-through-transition">
+        <div class="hf-catalog-zoom-through-transition">
           <div class="scene from">Before</div>
           <div class="scene to">Zoom Through Transition</div>
           <div class="fx"></div>
@@ -124,7 +124,7 @@
         const tl = gsap.timeline({ paused: true });
         const startTime = 0.5;
         tl.fromTo(
-          ".hf-remocn-zoom-through-transition .to",
+          ".hf-catalog-zoom-through-transition .to",
           { "--hf-clip-right": "100%", "--hf-to-x": "60px", "--hf-to-scale": 1.04 },
           {
             "--hf-clip-right": "0%",
@@ -136,7 +136,7 @@
           startTime,
         );
         tl.to(
-          ".hf-remocn-zoom-through-transition .from",
+          ".hf-catalog-zoom-through-transition .from",
           {
             "--hf-from-x": "-70px",
             "--hf-from-scale": 0.96,
@@ -147,13 +147,13 @@
           startTime,
         );
         tl.fromTo(
-          ".hf-remocn-zoom-through-transition .fx",
+          ".hf-catalog-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-catalog-zoom-through-transition .rgb",
           { "--hf-rgb-opacity": 0, "--hf-rgb-x": "-16px" },
           {
             "--hf-rgb-opacity": 1,
diff --git a/registry/components/zoom-through-transition/registry-item.json b/registry/components/zoom-through-transition/registry-item.json
index 06bdf7322d..d5aaa200b1 100644
--- a/registry/components/zoom-through-transition/registry-item.json
+++ b/registry/components/zoom-through-transition/registry-item.json
@@ -4,7 +4,7 @@
   "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"],
+  "tags": ["transition-primitive"],
   "variables": [
     {
       "id": "from-label",
diff --git a/registry/components/zoom-through-transition/zoom-through-transition.html b/registry/components/zoom-through-transition/zoom-through-transition.html
index 3c85c55336..545a290604 100644
--- a/registry/components/zoom-through-transition/zoom-through-transition.html
+++ b/registry/components/zoom-through-transition/zoom-through-transition.html
@@ -65,7 +65,7 @@
             background: #111827;
           }
 
-          .hf-remocn-zoom-through-transition {
+          .hf-catalog-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);
@@ -77,13 +77,13 @@
             color: var(--hf-ink);
             font-family: Inter, system-ui, sans-serif;
           }
-          .hf-remocn-zoom-through-transition {
+          .hf-catalog-zoom-through-transition {
             position: absolute;
             inset: 0;
             overflow: hidden;
             background: #111827;
           }
-          .hf-remocn-zoom-through-transition .scene {
+          .hf-catalog-zoom-through-transition .scene {
             position: absolute;
             inset: 0;
             display: grid;
@@ -93,7 +93,7 @@
             letter-spacing: -0.05em;
             color: #fff;
           }
-          .hf-remocn-zoom-through-transition .from {
+          .hf-catalog-zoom-through-transition .from {
             background:
               repeating-linear-gradient(
                 90deg,
@@ -108,7 +108,7 @@
               scale(var(--hf-from-scale, 1));
             filter: blur(calc(var(--hf-from-blur, 0px) * var(--hf-depth, 1)));
           }
-          .hf-remocn-zoom-through-transition .to {
+          .hf-catalog-zoom-through-transition .to {
             background:
               repeating-linear-gradient(
                 90deg,
@@ -127,14 +127,14 @@
                 var(--hf-clip-left, 0%)
             );
           }
-          .hf-remocn-zoom-through-transition .fx {
+          .hf-catalog-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 {
+          .hf-catalog-zoom-through-transition .rgb {
             position: absolute;
             inset: 0;
             pointer-events: none;
@@ -149,7 +149,7 @@
           }
         </style>
 
-        <div class="hf-remocn-zoom-through-transition">
+        <div class="hf-catalog-zoom-through-transition">
           >
           <div class="scene from">Before</div>
           <div class="scene to">Zoom Through Transition</div>
@@ -191,7 +191,7 @@
             var fromLabel = label(vars["from-label"]);
             var toLabel = label(vars["to-label"]);
 
-            var roots = document.querySelectorAll(".hf-remocn-zoom-through-transition");
+            var roots = document.querySelectorAll(".hf-catalog-zoom-through-transition");
             var mountRoot = document.getElementById("root");
             for (var i = 0; i < roots.length; i += 1) {
               var root = roots[i];
@@ -214,7 +214,7 @@
             // 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 SELF = ".hf-catalog-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.
diff --git a/registry/registry.json b/registry/registry.json
index ae2fb69d61..e31334efda 100644
--- a/registry/registry.json
+++ b/registry/registry.json
@@ -1533,6 +1533,6 @@
     }
   ],
   "catalogArtifact": {
-    "revision": "6e03561a0082cf676faac12c7d566fa2846ac0593be183b2fca4543e51aff1ee"
+    "revision": "6e83353888f7e2114f5195215d8b0cdf8794f925232ff8811428ac4d3979a7ba"
   }
 }