chore(catalog): remove internal source markers

Author: miguel-heygen

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,15 +46,15 @@ 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;
     --hf-surface: #ffffff;
     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,20 +102,20 @@ 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;
   }
 </style>
 
 <!--
   Timeline integration:
-  tl.fromTo('.hf-remocn-ai-generation-canvas .pill', { '--hf-pill-x': '-18px', opacity: 0 }, { '--hf-pill-x': '0px', opacity: 1, duration: 0.25, stagger: 0.08, ease: 'power2.out' }, startTime); tl.fromTo('.hf-remocn-ai-generation-canvas .card', { '--hf-card-y': '28px', '--hf-card-scale': 0.96, '--hf-card-opacity': 0 }, { '--hf-card-y': '0px', '--hf-card-scale': 1, '--hf-card-opacity': 1, duration: 0.42, stagger: 0.12, ease: 'power3.out' }, startTime + 0.2);
+  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