chore(catalog): remove internal source markers

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
 

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
 

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
 

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
 

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
 

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
 

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
 

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
 

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
 

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
 

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
 

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
 

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
 

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
 

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
 

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
 

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-catalog-rgb-glitch-text span,
-  .hf-remocn-rgb-glitch-text strong {
+  .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-catalog-rgb-glitch-text span,
-  .hf-remocn-rgb-glitch-text strong {
+  .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
 

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
 

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
 

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
 

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
 

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
 

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
 

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
 

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
 

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
 

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
 

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
 

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
 

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
 

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
 

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",
+      "data"
-      "remocn-port"
     ],
     "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",
+      "transition-primitive"
-      "remocn-port"
     ],
     "href": "/catalog/components/chromatic-aberration-wipe",
     "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/chromatic-aberration-wipe.png"
@@ -1371,8 +1364,7 @@
     "title": "Confetti",
     "description": "A deterministic celebration burst with seeded particles and gravity.",
     "tags": [
-      "effect",
+      "effect"
-      "remocn-port"
     ],
     "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",
+      "transition-primitive"
-      "remocn-port"
     ],
     "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",
+      "effect"
-      "remocn-port"
     ],
     "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",
+      "effect"
-      "remocn-port"
     ],
     "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",
+      "code-animation"
-      "remocn-port"
     ],
     "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",
+      "social-overlay"
-      "remocn-port"
     ],
     "href": "/catalog/components/x-follow-card",
     "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/x-follow-card.png"
@@ -5451,8 +5421,7 @@
     "title": "Zoom Through Transition",
     "description": "A transition that zooms through a focal card into the next scene.",
     "tags": [
-      "transition-primitive",
+      "transition-primitive"
-      "remocn-port"
     ],
     "href": "/catalog/components/zoom-through-transition",
     "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/zoom-through-transition.png"

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"}
+{"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"}

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"}
+{"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"}

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"}
+{"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"}

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"}
+{"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"}

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"}
+{"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"}

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"}
+{"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"}

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"}
+{"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"}

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"}
+{"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"}

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"}
+{"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"}

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"}
+{"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"}

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"}
+{"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"}

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"}
+{"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"}

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"}
+{"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"}

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"}
+{"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"}

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"}
+{"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"}

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",

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 @@
 </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 @@
     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 @@
     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 @@
     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 @@
       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 @@
 
 <!--
   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);
 -->

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 @@
         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",

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",

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.

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",

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 @@
 </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 @@
     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 @@
     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 @@
 
 <!--
   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);
 -->

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 @@
         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,

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",

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",

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);
 -->

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,

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",

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.

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",

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);
 -->

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,

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",

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 @@
 </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 @@
     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 @@
         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 @@
     text-align: center;
     overflow: hidden;
   }
-  .hf-remocn-confetti .spot {
+  .hf-catalog-confetti .spot {
     position: absolute;
     width: 260px;
     height: 260px;
@@ -99,7 +99,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%;
@@ -110,12 +110,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: var(--space-1, 8px) 0 0;
     color: color-mix(in srgb, var(--muted, #ffffff) 70%, transparent);
   }
@@ -123,5 +123,5 @@
 
 <!--
   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); }
 -->

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 @@
         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 @@
           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,

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",

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,

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);
 -->

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",

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,

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);
 -->

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",

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,

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);
 -->

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",

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,

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);
 -->

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",

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 @@
         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 @@
           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(

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 @@
 </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 @@
     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 @@
     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 @@
       ),
       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 @@
     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 @@
     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 @@
     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 @@
 
 <!--
   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); }
 -->

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",

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.

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",

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,

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);
 -->

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",

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,