diff --git a/docs/catalog/components/kinetic-center-build.mdx b/docs/catalog/components/kinetic-center-build.mdx
new file mode 100644
index 000000000..1a8d1e62d
--- /dev/null
+++ b/docs/catalog/components/kinetic-center-build.mdx
@@ -0,0 +1,645 @@
+---
+title: "Kinetic Center Build"
+description: "Words enter from the right and push the growing phrase left until the final line locks centered."
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
+
+<VariablesExplorer
+  previewSrc="/public/catalog/components/kinetic-center-build.json"
+  compositionId="kinetic-center-build"
+  compositionSrc="compositions/components/kinetic-center-build.html"
+  variables={[{"id":"text","type":"string","role":"content","label":"Text","description":"Short phrase that builds one word at a time.","default":"Words push left."},{"id":"font_size","type":"number","role":"style","label":"Font size","description":"Maximum text size in pixels. Longer phrases shrink to stay inside the frame.","default":72,"min":36,"max":160,"step":2,"unit":"px"},{"id":"entry_offset","type":"number","role":"motion","label":"Entry offset","description":"Horizontal distance each new word travels before it lands.","default":88,"min":20,"max":160,"step":4,"unit":"px"},{"id":"color","type":"color","role":"style","label":"Color","description":"Text color for the full phrase.","default":"#171717"},{"id":"font_weight","type":"enum","role":"style","label":"Font weight","description":"Weight used by every word in the phrase.","default":"600","options":[{"value":"500","label":"Medium"},{"value":"600","label":"Semibold"},{"value":"700","label":"Bold"},{"value":"800","label":"Extra bold"}]}]}
+>
+
+```html kinetic-center-build.html
+<!doctype html>
+<!--
+  Kinetic Center Build
+
+  Words enter from the right while the existing phrase shifts left, keeping
+  every intermediate phrase centered until the final line locks in place.
+
+  Native HyperFrames port prepared through Hyfrme from:
+  https://github.com/Remocn/remocn/blob/ea730a20b4ab09430ee7292aebc847c002375151/registry/remocn/kinetic-center-build/index.tsx
+
+  MIT License
+
+  Copyright (c) 2026 Remocn
+
+  Permission is hereby granted, free of charge, to any person obtaining a copy
+  of this software and associated documentation files (the "Software"), to deal
+  in the Software without restriction, including without limitation the rights
+  to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+  copies of the Software, and to permit persons to whom the Software is
+  furnished to do so, subject to the following conditions:
+
+  The above copyright notice and this permission notice shall be included in all
+  copies or substantial portions of the Software.
+
+  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+  SOFTWARE.
+-->
+<html
+  lang="en"
+  data-composition-id="kinetic-center-build"
+  data-composition-duration="2"
+  data-composition-variables='[
+    { "id": "text", "type": "string", "role": "content", "label": "Text", "description": "Short phrase that builds one word at a time.", "default": "Words push left." },
+    { "id": "font_size", "type": "number", "role": "style", "label": "Font size", "description": "Maximum text size in pixels. Longer phrases shrink to stay inside the frame.", "default": 72, "min": 36, "max": 160, "step": 2, "unit": "px" },
+    { "id": "entry_offset", "type": "number", "role": "motion", "label": "Entry offset", "description": "Horizontal distance each new word travels before it lands.", "default": 88, "min": 20, "max": 160, "step": 4, "unit": "px" },
+    { "id": "color", "type": "color", "role": "style", "label": "Color", "description": "Text color for the full phrase.", "default": "#171717" },
+    { "id": "font_weight", "type": "enum", "role": "style", "label": "Font weight", "description": "Weight used by every word in the phrase.", "default": "600", "options": [{ "value": "500", "label": "Medium" }, { "value": "600", "label": "Semibold" }, { "value": "700", "label": "Bold" }, { "value": "800", "label": "Extra bold" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Kinetic Center Build</title>
+  </head>
+  <body>
+    <template>
+      <link
+        rel="stylesheet"
+        href="https://fonts.googleapis.com/css2?family=Geist:wght@500;600;700;800&amp;display=block"
+      />
+
+      <style>
+        *,
+        *::before,
+        *::after {
+          box-sizing: border-box;
+        }
+
+        #root {
+          position: absolute;
+          inset: 0;
+          overflow: hidden;
+          container-type: size;
+          isolation: isolate;
+          color: var(--color, #171717);
+          font-family: var(--font-display, Geist, system-ui, sans-serif);
+          pointer-events: none;
+        }
+
+        .kcb-clip,
+        .kcb-stage {
+          position: absolute;
+          inset: 0;
+          overflow: hidden;
+        }
+
+        .kcb-stage {
+          letter-spacing: -0.03em;
+          white-space: nowrap;
+        }
+
+        .kcb-word {
+          --kcb-blur: 0px;
+          position: absolute;
+          left: 50%;
+          top: 50%;
+          display: inline-block;
+          color: inherit;
+          line-height: 1;
+          white-space: nowrap;
+          opacity: 0;
+          filter: blur(var(--kcb-blur));
+          backface-visibility: hidden;
+          will-change: transform, filter, opacity;
+        }
+      </style>
+
+      <div id="root" data-composition-id="kinetic-center-build" data-duration="2" data-fps="30">
+        <div
+          id="kcb-clip"
+          class="kcb-clip clip"
+          data-start="0"
+          data-duration="2"
+          data-track-index="0"
+        >
+          <div id="kcb-stage" class="kcb-stage" role="img"></div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/CustomEase.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var stage = document.getElementById("kcb-stage");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            function numberBetween(value, fallback, min, max) {
+              var parsed = Number(value);
+              if (!Number.isFinite(parsed)) return fallback;
+              return Math.min(max, Math.max(min, parsed));
+            }
+
+            var text = typeof vars.text === "string" ? vars.text.trim() : "";
+            if (!text) text = "Words push left.";
+
+            var words = text.split(/\s+/);
+            var requestedFontSize = numberBetween(vars.font_size, 72, 36, 160);
+            var entryOffset = numberBetween(vars.entry_offset, 88, 20, 160);
+            var fontWeight =
+              vars.font_weight === "500" || vars.font_weight === "700" || vars.font_weight === "800"
+                ? vars.font_weight
+                : "600";
+
+            stage.style.fontWeight = fontWeight;
+            stage.setAttribute("aria-label", text);
+
+            var canvas = document.createElement("canvas");
+            var context = canvas.getContext("2d");
+            var measureFont = '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif';
+            var gapRatio = 10 / 72;
+
+            function measure(fontSize) {
+              if (!context) {
+                return words.map(function (word) {
+                  return word.length * fontSize * 0.55;
+                });
+              }
+              context.font = fontWeight + " " + fontSize + "px " + measureFont;
+              return words.map(function (word) {
+                return context.measureText(word).width;
+              });
+            }
+
+            var fontSize = requestedFontSize;
+            var widths = measure(fontSize);
+            var gap = fontSize * gapRatio;
+            var fullWidth = widths.reduce(
+              function (total, width) {
+                return total + width;
+              },
+              gap * Math.max(0, words.length - 1),
+            );
+            var maxWidth = Math.max(1, root.clientWidth * 0.9);
+
+            if (fullWidth > maxWidth) {
+              fontSize = Math.max(24, fontSize * (maxWidth / fullWidth));
+              widths = measure(fontSize);
+              gap = fontSize * gapRatio;
+            }
+
+            stage.style.fontSize = fontSize + "px";
+
+            var positionsAt = [];
+            for (var count = 1; count <= words.length; count += 1) {
+              var total = gap * (count - 1);
+              for (var widthIndex = 0; widthIndex < count; widthIndex += 1) {
+                total += widths[widthIndex];
+              }
+
+              var cursor = -total / 2;
+              var positions = [];
+              for (var positionIndex = 0; positionIndex < count; positionIndex += 1) {
+                positions.push(cursor + widths[positionIndex] / 2);
+                cursor += widths[positionIndex] + gap;
+              }
+              positionsAt.push(positions);
+            }
+
+            var elements = words.map(function (word, index) {
+              var element = document.createElement("span");
+              element.id = "kcb-word-" + index;
+              element.className = "kcb-word";
+              element.textContent = word;
+              element.setAttribute("aria-hidden", "true");
+              stage.appendChild(element);
+              return element;
+            });
+
+            gsap.registerPlugin(CustomEase);
+            var entryEase = CustomEase.create("kcb-entry-ease", "M0,0 C0.2,0.8 0.2,1 1,1");
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "2"));
+            var firstDuration = 10 / 30;
+            var pushDuration = 13 / 30;
+            var authoredBuildDuration =
+              firstDuration + Math.max(0, words.length - 1) * pushDuration;
+            var availableBuildDuration = Math.max(0.25, duration - 0.5);
+            var timingScale = Math.min(1, availableBuildDuration / authoredBuildDuration);
+            firstDuration *= timingScale;
+            pushDuration *= timingScale;
+
+            var tl = gsap.timeline({ paused: true });
+
+            elements.forEach(function (element, index) {
+              var targetX = positionsAt[index][index];
+              var start = index === 0 ? 0 : firstDuration + (index - 1) * pushDuration;
+              var moveDuration = index === 0 ? firstDuration : pushDuration;
+              var fromX = index === 0 ? targetX : targetX + entryOffset;
+              var fromY = index === 0 ? 6 : 0;
+
+              tl.fromTo(
+                element,
+                {
+                  x: fromX,
+                  y: fromY,
+                  xPercent: -50,
+                  yPercent: -50,
+                  scale: 0.992,
+                  opacity: 0,
+                  "--kcb-blur": "3.5px",
+                },
+                {
+                  x: targetX,
+                  y: 0,
+                  xPercent: -50,
+                  yPercent: -50,
+                  scale: 1,
+                  opacity: 1,
+                  "--kcb-blur": "0px",
+                  duration: moveDuration,
+                  ease: entryEase,
+                  immediateRender: index === 0,
+                },
+                start,
+              );
+
+              if (index === 0) return;
+
+              for (var priorIndex = 0; priorIndex < index; priorIndex += 1) {
+                var priorElement = elements[priorIndex];
+                var nextX = positionsAt[index][priorIndex];
+                var blurPeak = start + moveDuration / 2;
+
+                tl.to(priorElement, { x: nextX, duration: moveDuration, ease: entryEase }, start);
+                tl.to(
+                  priorElement,
+                  { "--kcb-blur": "0.8px", duration: moveDuration / 2, ease: "none" },
+                  start,
+                );
+                tl.to(
+                  priorElement,
+                  { "--kcb-blur": "0px", duration: moveDuration / 2, ease: "none" },
+                  blurPeak,
+                );
+              }
+            });
+
+            tl.seek(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["kinetic-center-build"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
+```
+
+</VariablesExplorer>
+
+## Install
+
+<InstallCommand command="npx hyperframes add kinetic-center-build" item="kinetic-center-build" />
+
+That writes one file: `compositions/components/kinetic-center-build.html`.
+
+## Paste it into your composition
+
+Open `compositions/components/kinetic-center-build.html` and copy what is inside into your own composition.
+
+A component has no size or duration of its own. It takes both from the composition
+you paste it into.
+
+## Variables
+
+Every one of these has a default, so the piece works untouched. Set the ones you
+want to change on the element:
+
+| Variable       | Default            | Accepts                    | What it does                                                                 |
+| -------------- | ------------------ | -------------------------- | ---------------------------------------------------------------------------- |
+| `text`         | `Words push left.` | string                     | Short phrase that builds one word at a time.                                 |
+| `font_size`    | `72`               | 36px to 160px, step 2px    | Maximum text size in pixels. Longer phrases shrink to stay inside the frame. |
+| `entry_offset` | `88`               | 20px to 160px, step 4px    | Horizontal distance each new word travels before it lands.                   |
+| `color`        | `#171717`          | color                      | Text color for the full phrase.                                              |
+| `font_weight`  | `600`              | `500`, `600`, `700`, `800` | Weight used by every word in the phrase.                                     |
+
+Set them with `data-variable-values` on the element that mounts it. These are the
+defaults, so this behaves exactly like the preview above until you change one:
+
+```html wrap
+<div
+  data-composition-id="kinetic-center-build"
+  data-composition-src="compositions/components/kinetic-center-build.html"
+  data-variable-values='{"text":"Words push left.","font_size":72,"entry_offset":88,"color":"#171717","font_weight":"600"}'
+></div>
+```
+
+## Source
+
+<Accordion title={`kinetic-center-build.html`}>
+
+```html
+<!doctype html>
+<!--
+  Kinetic Center Build
+
+  Words enter from the right while the existing phrase shifts left, keeping
+  every intermediate phrase centered until the final line locks in place.
+
+  Native HyperFrames port prepared through Hyfrme from:
+  https://github.com/Remocn/remocn/blob/ea730a20b4ab09430ee7292aebc847c002375151/registry/remocn/kinetic-center-build/index.tsx
+
+  MIT License
+
+  Copyright (c) 2026 Remocn
+
+  Permission is hereby granted, free of charge, to any person obtaining a copy
+  of this software and associated documentation files (the "Software"), to deal
+  in the Software without restriction, including without limitation the rights
+  to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+  copies of the Software, and to permit persons to whom the Software is
+  furnished to do so, subject to the following conditions:
+
+  The above copyright notice and this permission notice shall be included in all
+  copies or substantial portions of the Software.
+
+  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+  SOFTWARE.
+-->
+<html
+  lang="en"
+  data-composition-id="kinetic-center-build"
+  data-composition-duration="2"
+  data-composition-variables='[
+    { "id": "text", "type": "string", "role": "content", "label": "Text", "description": "Short phrase that builds one word at a time.", "default": "Words push left." },
+    { "id": "font_size", "type": "number", "role": "style", "label": "Font size", "description": "Maximum text size in pixels. Longer phrases shrink to stay inside the frame.", "default": 72, "min": 36, "max": 160, "step": 2, "unit": "px" },
+    { "id": "entry_offset", "type": "number", "role": "motion", "label": "Entry offset", "description": "Horizontal distance each new word travels before it lands.", "default": 88, "min": 20, "max": 160, "step": 4, "unit": "px" },
+    { "id": "color", "type": "color", "role": "style", "label": "Color", "description": "Text color for the full phrase.", "default": "#171717" },
+    { "id": "font_weight", "type": "enum", "role": "style", "label": "Font weight", "description": "Weight used by every word in the phrase.", "default": "600", "options": [{ "value": "500", "label": "Medium" }, { "value": "600", "label": "Semibold" }, { "value": "700", "label": "Bold" }, { "value": "800", "label": "Extra bold" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Kinetic Center Build</title>
+  </head>
+  <body>
+    <template>
+      <link
+        rel="stylesheet"
+        href="https://fonts.googleapis.com/css2?family=Geist:wght@500;600;700;800&amp;display=block"
+      />
+
+      <style>
+        *,
+        *::before,
+        *::after {
+          box-sizing: border-box;
+        }
+
+        #root {
+          position: absolute;
+          inset: 0;
+          overflow: hidden;
+          container-type: size;
+          isolation: isolate;
+          color: var(--color, #171717);
+          font-family: var(--font-display, Geist, system-ui, sans-serif);
+          pointer-events: none;
+        }
+
+        .kcb-clip,
+        .kcb-stage {
+          position: absolute;
+          inset: 0;
+          overflow: hidden;
+        }
+
+        .kcb-stage {
+          letter-spacing: -0.03em;
+          white-space: nowrap;
+        }
+
+        .kcb-word {
+          --kcb-blur: 0px;
+          position: absolute;
+          left: 50%;
+          top: 50%;
+          display: inline-block;
+          color: inherit;
+          line-height: 1;
+          white-space: nowrap;
+          opacity: 0;
+          filter: blur(var(--kcb-blur));
+          backface-visibility: hidden;
+          will-change: transform, filter, opacity;
+        }
+      </style>
+
+      <div id="root" data-composition-id="kinetic-center-build" data-duration="2" data-fps="30">
+        <div
+          id="kcb-clip"
+          class="kcb-clip clip"
+          data-start="0"
+          data-duration="2"
+          data-track-index="0"
+        >
+          <div id="kcb-stage" class="kcb-stage" role="img"></div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/CustomEase.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var stage = document.getElementById("kcb-stage");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            function numberBetween(value, fallback, min, max) {
+              var parsed = Number(value);
+              if (!Number.isFinite(parsed)) return fallback;
+              return Math.min(max, Math.max(min, parsed));
+            }
+
+            var text = typeof vars.text === "string" ? vars.text.trim() : "";
+            if (!text) text = "Words push left.";
+
+            var words = text.split(/\s+/);
+            var requestedFontSize = numberBetween(vars.font_size, 72, 36, 160);
+            var entryOffset = numberBetween(vars.entry_offset, 88, 20, 160);
+            var fontWeight =
+              vars.font_weight === "500" || vars.font_weight === "700" || vars.font_weight === "800"
+                ? vars.font_weight
+                : "600";
+
+            stage.style.fontWeight = fontWeight;
+            stage.setAttribute("aria-label", text);
+
+            var canvas = document.createElement("canvas");
+            var context = canvas.getContext("2d");
+            var measureFont = '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif';
+            var gapRatio = 10 / 72;
+
+            function measure(fontSize) {
+              if (!context) {
+                return words.map(function (word) {
+                  return word.length * fontSize * 0.55;
+                });
+              }
+              context.font = fontWeight + " " + fontSize + "px " + measureFont;
+              return words.map(function (word) {
+                return context.measureText(word).width;
+              });
+            }
+
+            var fontSize = requestedFontSize;
+            var widths = measure(fontSize);
+            var gap = fontSize * gapRatio;
+            var fullWidth = widths.reduce(
+              function (total, width) {
+                return total + width;
+              },
+              gap * Math.max(0, words.length - 1),
+            );
+            var maxWidth = Math.max(1, root.clientWidth * 0.9);
+
+            if (fullWidth > maxWidth) {
+              fontSize = Math.max(24, fontSize * (maxWidth / fullWidth));
+              widths = measure(fontSize);
+              gap = fontSize * gapRatio;
+            }
+
+            stage.style.fontSize = fontSize + "px";
+
+            var positionsAt = [];
+            for (var count = 1; count <= words.length; count += 1) {
+              var total = gap * (count - 1);
+              for (var widthIndex = 0; widthIndex < count; widthIndex += 1) {
+                total += widths[widthIndex];
+              }
+
+              var cursor = -total / 2;
+              var positions = [];
+              for (var positionIndex = 0; positionIndex < count; positionIndex += 1) {
+                positions.push(cursor + widths[positionIndex] / 2);
+                cursor += widths[positionIndex] + gap;
+              }
+              positionsAt.push(positions);
+            }
+
+            var elements = words.map(function (word, index) {
+              var element = document.createElement("span");
+              element.id = "kcb-word-" + index;
+              element.className = "kcb-word";
+              element.textContent = word;
+              element.setAttribute("aria-hidden", "true");
+              stage.appendChild(element);
+              return element;
+            });
+
+            gsap.registerPlugin(CustomEase);
+            var entryEase = CustomEase.create("kcb-entry-ease", "M0,0 C0.2,0.8 0.2,1 1,1");
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "2"));
+            var firstDuration = 10 / 30;
+            var pushDuration = 13 / 30;
+            var authoredBuildDuration =
+              firstDuration + Math.max(0, words.length - 1) * pushDuration;
+            var availableBuildDuration = Math.max(0.25, duration - 0.5);
+            var timingScale = Math.min(1, availableBuildDuration / authoredBuildDuration);
+            firstDuration *= timingScale;
+            pushDuration *= timingScale;
+
+            var tl = gsap.timeline({ paused: true });
+
+            elements.forEach(function (element, index) {
+              var targetX = positionsAt[index][index];
+              var start = index === 0 ? 0 : firstDuration + (index - 1) * pushDuration;
+              var moveDuration = index === 0 ? firstDuration : pushDuration;
+              var fromX = index === 0 ? targetX : targetX + entryOffset;
+              var fromY = index === 0 ? 6 : 0;
+
+              tl.fromTo(
+                element,
+                {
+                  x: fromX,
+                  y: fromY,
+                  xPercent: -50,
+                  yPercent: -50,
+                  scale: 0.992,
+                  opacity: 0,
+                  "--kcb-blur": "3.5px",
+                },
+                {
+                  x: targetX,
+                  y: 0,
+                  xPercent: -50,
+                  yPercent: -50,
+                  scale: 1,
+                  opacity: 1,
+                  "--kcb-blur": "0px",
+                  duration: moveDuration,
+                  ease: entryEase,
+                  immediateRender: index === 0,
+                },
+                start,
+              );
+
+              if (index === 0) return;
+
+              for (var priorIndex = 0; priorIndex < index; priorIndex += 1) {
+                var priorElement = elements[priorIndex];
+                var nextX = positionsAt[index][priorIndex];
+                var blurPeak = start + moveDuration / 2;
+
+                tl.to(priorElement, { x: nextX, duration: moveDuration, ease: entryEase }, start);
+                tl.to(
+                  priorElement,
+                  { "--kcb-blur": "0.8px", duration: moveDuration / 2, ease: "none" },
+                  start,
+                );
+                tl.to(
+                  priorElement,
+                  { "--kcb-blur": "0px", duration: moveDuration / 2, ease: "none" },
+                  blurPeak,
+                );
+              }
+            });
+
+            tl.seek(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["kinetic-center-build"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
+```
+
+</Accordion>
+
+{/* hf:generated-footer */}
+
+Tagged `motion-primitive` `text-effects` `kinetic-type` `reveal` `remocn-port`.
+
+Created by [Remocn](https://github.com/Remocn/remocn).
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/docs.json b/docs/docs.json
index 8ac6b1932..f2744d4f0 100644
--- a/docs/docs.json
+++ b/docs/docs.json
@@ -297,6 +297,7 @@
                   "catalog/blocks/hw-title",
                   "catalog/blocks/hw-write-title",
                   "catalog/components/inline-highlight",
+                  "catalog/components/kinetic-center-build",
                   "catalog/components/kinetic-type-swap",
                   "catalog/components/line-by-line-slide",
                   "catalog/components/line-swap",
diff --git a/docs/public/catalog-index.json b/docs/public/catalog-index.json
index 0d0f29033..721a0e265 100644
--- a/docs/public/catalog-index.json
+++ b/docs/public/catalog-index.json
@@ -2241,6 +2241,21 @@
     "href": "/catalog/components/keyframe-scrub-stack",
     "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/keyframe-scrub-stack.png"
   },
+  {
+    "name": "kinetic-center-build",
+    "type": "component",
+    "title": "Kinetic Center Build",
+    "description": "Words enter from the right and push the growing phrase left until the final line locks centered.",
+    "tags": [
+      "motion-primitive",
+      "text-effects",
+      "kinetic-type",
+      "reveal",
+      "remocn-port"
+    ],
+    "href": "/catalog/components/kinetic-center-build",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/kinetic-center-build.png"
+  },
   {
     "name": "kinetic-type-swap",
     "type": "component",
diff --git a/docs/public/catalog/components/kinetic-center-build.json b/docs/public/catalog/components/kinetic-center-build.json
new file mode 100644
index 000000000..186af952f
--- /dev/null
+++ b/docs/public/catalog/components/kinetic-center-build.json
@@ -0,0 +1,3 @@
+{
+  "html": "<!doctype html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=1920, height=1080\" />\n  <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n  <style>* { margin: 0; padding: 0; } html, body { width: 1920px; height: 1080px; overflow: hidden; background: #0a0a0a; }\n    [data-composition-src] { inset: 0; display: grid; place-items: center stretch; box-sizing: border-box; padding: 98px; }</style>\n</head>\n<body>\n  <div data-composition-id=\"preview-root\" data-width=\"1920\" data-height=\"1080\" data-start=\"0\" data-duration=\"5\" data-hf-theme=\"dark\">\n    <div data-composition-id=\"kinetic-center-build\" data-composition-src=\"data:text/html;base64,PCFkb2N0eXBlIGh0bWw+CjwhLS0KICBLaW5ldGljIENlbnRlciBCdWlsZAoKICBXb3JkcyBlbnRlciBmcm9tIHRoZSByaWdodCB3aGlsZSB0aGUgZXhpc3RpbmcgcGhyYXNlIHNoaWZ0cyBsZWZ0LCBrZWVwaW5nCiAgZXZlcnkgaW50ZXJtZWRpYXRlIHBocmFzZSBjZW50ZXJlZCB1bnRpbCB0aGUgZmluYWwgbGluZSBsb2NrcyBpbiBwbGFjZS4KCiAgTmF0aXZlIEh5cGVyRnJhbWVzIHBvcnQgcHJlcGFyZWQgdGhyb3VnaCBIeWZybWUgZnJvbToKICBodHRwczovL2dpdGh1Yi5jb20vUmVtb2NuL3JlbW9jbi9ibG9iL2VhNzMwYTIwYjRhYjA5NDMwZWU3MjkyYWViYzg0N2MwMDIzNzUxNTEvcmVnaXN0cnkvcmVtb2NuL2tpbmV0aWMtY2VudGVyLWJ1aWxkL2luZGV4LnRzeAoKICBNSVQgTGljZW5zZQoKICBDb3B5cmlnaHQgKGMpIDIwMjYgUmVtb2NuCgogIFBlcm1pc3Npb24gaXMgaGVyZWJ5IGdyYW50ZWQsIGZyZWUgb2YgY2hhcmdlLCB0byBhbnkgcGVyc29uIG9idGFpbmluZyBhIGNvcHkKICBvZiB0aGlzIHNvZnR3YXJlIGFuZCBhc3NvY2lhdGVkIGRvY3VtZW50YXRpb24gZmlsZXMgKHRoZSAiU29mdHdhcmUiKSwgdG8gZGVhbAogIGluIHRoZSBTb2Z0d2FyZSB3aXRob3V0IHJlc3RyaWN0aW9uLCBpbmNsdWRpbmcgd2l0aG91dCBsaW1pdGF0aW9uIHRoZSByaWdodHMKICB0byB1c2UsIGNvcHksIG1vZGlmeSwgbWVyZ2UsIHB1Ymxpc2gsIGRpc3RyaWJ1dGUsIHN1YmxpY2Vuc2UsIGFuZC9vciBzZWxsCiAgY29waWVzIG9mIHRoZSBTb2Z0d2FyZSwgYW5kIHRvIHBlcm1pdCBwZXJzb25zIHRvIHdob20gdGhlIFNvZnR3YXJlIGlzCiAgZnVybmlzaGVkIHRvIGRvIHNvLCBzdWJqZWN0IHRvIHRoZSBmb2xsb3dpbmcgY29uZGl0aW9uczoKCiAgVGhlIGFib3ZlIGNvcHlyaWdodCBub3RpY2UgYW5kIHRoaXMgcGVybWlzc2lvbiBub3RpY2Ugc2hhbGwgYmUgaW5jbHVkZWQgaW4gYWxsCiAgY29waWVzIG9yIHN1YnN0YW50aWFsIHBvcnRpb25zIG9mIHRoZSBTb2Z0d2FyZS4KCiAgVEhFIFNPRlRXQVJFIElTIFBST1ZJREVEICJBUyBJUyIsIFdJVEhPVVQgV0FSUkFOVFkgT0YgQU5ZIEtJTkQsIEVYUFJFU1MgT1IKICBJTVBMSUVELCBJTkNMVURJTkcgQlVUIE5PVCBMSU1JVEVEIFRPIFRIRSBXQVJSQU5USUVTIE9GIE1FUkNIQU5UQUJJTElUWSwKICBGSVRORVNTIEZPUiBBIFBBUlRJQ1VMQVIgUFVSUE9TRSBBTkQgTk9OSU5GUklOR0VNRU5ULiBJTiBOTyBFVkVOVCBTSEFMTCBUSEUKICBBVVRIT1JTIE9SIENPUFlSSUdIVCBIT0xERVJTIEJFIExJQUJMRSBGT1IgQU5ZIENMQUlNLCBEQU1BR0VTIE9SIE9USEVSCiAgTElBQklMSVRZLCBXSEVUSEVSIElOIEFOIEFDVElPTiBPRiBDT05UUkFDVCwgVE9SVCBPUiBPVEhFUldJU0UsIEFSSVNJTkcgRlJPTSwKICBPVVQgT0YgT1IgSU4gQ09OTkVDVElPTiBXSVRIIFRIRSBTT0ZUV0FSRSBPUiBUSEUgVVNFIE9SIE9USEVSIERFQUxJTkdTIElOIFRIRQogIFNPRlRXQVJFLgotLT4KPGh0bWwKICBsYW5nPSJlbiIKICBkYXRhLWNvbXBvc2l0aW9uLWlkPSJraW5ldGljLWNlbnRlci1idWlsZCIKICBkYXRhLWNvbXBvc2l0aW9uLWR1cmF0aW9uPSIyIgogIGRhdGEtY29tcG9zaXRpb24tdmFyaWFibGVzPSdbCiAgICB7ICJpZCI6ICJ0ZXh0IiwgInR5cGUiOiAic3RyaW5nIiwgInJvbGUiOiAiY29udGVudCIsICJsYWJlbCI6ICJUZXh0IiwgImRlc2NyaXB0aW9uIjogIlNob3J0IHBocmFzZSB0aGF0IGJ1aWxkcyBvbmUgd29yZCBhdCBhIHRpbWUuIiwgImRlZmF1bHQiOiAiV29yZHMgcHVzaCBsZWZ0LiIgfSwKICAgIHsgImlkIjogImZvbnRfc2l6ZSIsICJ0eXBlIjogIm51bWJlciIsICJyb2xlIjogInN0eWxlIiwgImxhYmVsIjogIkZvbnQgc2l6ZSIsICJkZXNjcmlwdGlvbiI6ICJNYXhpbXVtIHRleHQgc2l6ZSBpbiBwaXhlbHMuIExvbmdlciBwaHJhc2VzIHNocmluayB0byBzdGF5IGluc2lkZSB0aGUgZnJhbWUuIiwgImRlZmF1bHQiOiA3MiwgIm1pbiI6IDM2LCAibWF4IjogMTYwLCAic3RlcCI6IDIsICJ1bml0IjogInB4IiB9LAogICAgeyAiaWQiOiAiZW50cnlfb2Zmc2V0IiwgInR5cGUiOiAibnVtYmVyIiwgInJvbGUiOiAibW90aW9uIiwgImxhYmVsIjogIkVudHJ5IG9mZnNldCIsICJkZXNjcmlwdGlvbiI6ICJIb3Jpem9udGFsIGRpc3RhbmNlIGVhY2ggbmV3IHdvcmQgdHJhdmVscyBiZWZvcmUgaXQgbGFuZHMuIiwgImRlZmF1bHQiOiA4OCwgIm1pbiI6IDIwLCAibWF4IjogMTYwLCAic3RlcCI6IDQsICJ1bml0IjogInB4IiB9LAogICAgeyAiaWQiOiAiY29sb3IiLCAidHlwZSI6ICJjb2xvciIsICJyb2xlIjogInN0eWxlIiwgImxhYmVsIjogIkNvbG9yIiwgImRlc2NyaXB0aW9uIjogIlRleHQgY29sb3IgZm9yIHRoZSBmdWxsIHBocmFzZS4iLCAiZGVmYXVsdCI6ICIjMTcxNzE3IiB9LAogICAgeyAiaWQiOiAiZm9udF93ZWlnaHQiLCAidHlwZSI6ICJlbnVtIiwgInJvbGUiOiAic3R5bGUiLCAibGFiZWwiOiAiRm9udCB3ZWlnaHQiLCAiZGVzY3JpcHRpb24iOiAiV2VpZ2h0IHVzZWQgYnkgZXZlcnkgd29yZCBpbiB0aGUgcGhyYXNlLiIsICJkZWZhdWx0IjogIjYwMCIsICJvcHRpb25zIjogW3sgInZhbHVlIjogIjUwMCIsICJsYWJlbCI6ICJNZWRpdW0iIH0sIHsgInZhbHVlIjogIjYwMCIsICJsYWJlbCI6ICJTZW1pYm9sZCIgfSwgeyAidmFsdWUiOiAiNzAwIiwgImxhYmVsIjogIkJvbGQiIH0sIHsgInZhbHVlIjogIjgwMCIsICJsYWJlbCI6ICJFeHRyYSBib2xkIiB9XSB9CiAgXScKPgogIDxoZWFkPgogICAgPG1ldGEgY2hhcnNldD0iVVRGLTgiIC8+CiAgICA8dGl0bGU+S2luZXRpYyBDZW50ZXIgQnVpbGQ8L3RpdGxlPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDx0ZW1wbGF0ZT4KICAgICAgPGxpbmsKICAgICAgICByZWw9InN0eWxlc2hlZXQiCiAgICAgICAgaHJlZj0iaHR0cHM6Ly9mb250cy5nb29nbGVhcGlzLmNvbS9jc3MyP2ZhbWlseT1HZWlzdDp3Z2h0QDUwMDs2MDA7NzAwOzgwMCZhbXA7ZGlzcGxheT1ibG9jayIKICAgICAgLz4KCiAgICAgIDxzdHlsZT4KICAgICAgICAqLAogICAgICAgICo6OmJlZm9yZSwKICAgICAgICAqOjphZnRlciB7CiAgICAgICAgICBib3gtc2l6aW5nOiBib3JkZXItYm94OwogICAgICAgIH0KCiAgICAgICAgI3Jvb3QgewogICAgICAgICAgcG9zaXRpb246IGFic29sdXRlOwogICAgICAgICAgaW5zZXQ6IDA7CiAgICAgICAgICBvdmVyZmxvdzogaGlkZGVuOwogICAgICAgICAgY29udGFpbmVyLXR5cGU6IHNpemU7CiAgICAgICAgICBpc29sYXRpb246IGlzb2xhdGU7CiAgICAgICAgICBjb2xvcjogdmFyKC0tY29sb3IsICMxNzE3MTcpOwogICAgICAgICAgZm9udC1mYW1pbHk6IHZhcigtLWZvbnQtZGlzcGxheSwgR2Vpc3QsIHN5c3RlbS11aSwgc2Fucy1zZXJpZik7CiAgICAgICAgICBwb2ludGVyLWV2ZW50czogbm9uZTsKICAgICAgICB9CgogICAgICAgIC5rY2ItY2xpcCwKICAgICAgICAua2NiLXN0YWdlIHsKICAgICAgICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTsKICAgICAgICAgIGluc2V0OiAwOwogICAgICAgICAgb3ZlcmZsb3c6IGhpZGRlbjsKICAgICAgICB9CgogICAgICAgIC5rY2Itc3RhZ2UgewogICAgICAgICAgbGV0dGVyLXNwYWNpbmc6IC0wLjAzZW07CiAgICAgICAgICB3aGl0ZS1zcGFjZTogbm93cmFwOwogICAgICAgIH0KCiAgICAgICAgLmtjYi13b3JkIHsKICAgICAgICAgIC0ta2NiLWJsdXI6IDBweDsKICAgICAgICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTsKICAgICAgICAgIGxlZnQ6IDUwJTsKICAgICAgICAgIHRvcDogNTAlOwogICAgICAgICAgZGlzcGxheTogaW5saW5lLWJsb2NrOwogICAgICAgICAgY29sb3I6IGluaGVyaXQ7CiAgICAgICAgICBsaW5lLWhlaWdodDogMTsKICAgICAgICAgIHdoaXRlLXNwYWNlOiBub3dyYXA7CiAgICAgICAgICBvcGFjaXR5OiAwOwogICAgICAgICAgZmlsdGVyOiBibHVyKHZhcigtLWtjYi1ibHVyKSk7CiAgICAgICAgICBiYWNrZmFjZS12aXNpYmlsaXR5OiBoaWRkZW47CiAgICAgICAgICB3aWxsLWNoYW5nZTogdHJhbnNmb3JtLCBmaWx0ZXIsIG9wYWNpdHk7CiAgICAgICAgfQogICAgICA8L3N0eWxlPgoKICAgICAgPGRpdiBpZD0icm9vdCIgZGF0YS1jb21wb3NpdGlvbi1pZD0ia2luZXRpYy1jZW50ZXItYnVpbGQiIGRhdGEtZHVyYXRpb249IjIiIGRhdGEtZnBzPSIzMCI+CiAgICAgICAgPGRpdgogICAgICAgICAgaWQ9ImtjYi1jbGlwIgogICAgICAgICAgY2xhc3M9ImtjYi1jbGlwIGNsaXAiCiAgICAgICAgICBkYXRhLXN0YXJ0PSIwIgogICAgICAgICAgZGF0YS1kdXJhdGlvbj0iMiIKICAgICAgICAgIGRhdGEtdHJhY2staW5kZXg9IjAiCiAgICAgICAgPgogICAgICAgICAgPGRpdiBpZD0ia2NiLXN0YWdlIiBjbGFzcz0ia2NiLXN0YWdlIiByb2xlPSJpbWciPjwvZGl2PgogICAgICAgIDwvZGl2PgoKICAgICAgICA8c2NyaXB0IHNyYz0iaHR0cHM6Ly9jZG4uanNkZWxpdnIubmV0L25wbS9nc2FwQDMuMTQuMi9kaXN0L2dzYXAubWluLmpzIj48L3NjcmlwdD4KICAgICAgICA8c2NyaXB0IHNyYz0iaHR0cHM6Ly9jZG4uanNkZWxpdnIubmV0L25wbS9nc2FwQDMuMTQuMi9kaXN0L0N1c3RvbUVhc2UubWluLmpzIj48L3NjcmlwdD4KICAgICAgICA8c2NyaXB0PgogICAgICAgICAgKGZ1bmN0aW9uICgpIHsKICAgICAgICAgICAgInVzZSBzdHJpY3QiOwoKICAgICAgICAgICAgdmFyIHJvb3QgPSBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgicm9vdCIpOwogICAgICAgICAgICB2YXIgc3RhZ2UgPSBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgia2NiLXN0YWdlIik7CiAgICAgICAgICAgIHZhciB2YXJzID0KICAgICAgICAgICAgICB3aW5kb3cuX19oeXBlcmZyYW1lcyAmJiB3aW5kb3cuX19oeXBlcmZyYW1lcy5nZXRWYXJpYWJsZXMKICAgICAgICAgICAgICAgID8gd2luZG93Ll9faHlwZXJmcmFtZXMuZ2V0VmFyaWFibGVzKCkKICAgICAgICAgICAgICAgIDoge307CgogICAgICAgICAgICBmdW5jdGlvbiBudW1iZXJCZXR3ZWVuKHZhbHVlLCBmYWxsYmFjaywgbWluLCBtYXgpIHsKICAgICAgICAgICAgICB2YXIgcGFyc2VkID0gTnVtYmVyKHZhbHVlKTsKICAgICAgICAgICAgICBpZiAoIU51bWJlci5pc0Zpbml0ZShwYXJzZWQpKSByZXR1cm4gZmFsbGJhY2s7CiAgICAgICAgICAgICAgcmV0dXJuIE1hdGgubWluKG1heCwgTWF0aC5tYXgobWluLCBwYXJzZWQpKTsKICAgICAgICAgICAgfQoKICAgICAgICAgICAgdmFyIHRleHQgPSB0eXBlb2YgdmFycy50ZXh0ID09PSAic3RyaW5nIiA/IHZhcnMudGV4dC50cmltKCkgOiAiIjsKICAgICAgICAgICAgaWYgKCF0ZXh0KSB0ZXh0ID0gIldvcmRzIHB1c2ggbGVmdC4iOwoKICAgICAgICAgICAgdmFyIHdvcmRzID0gdGV4dC5zcGxpdCgvXHMrLyk7CiAgICAgICAgICAgIHZhciByZXF1ZXN0ZWRGb250U2l6ZSA9IG51bWJlckJldHdlZW4odmFycy5mb250X3NpemUsIDcyLCAzNiwgMTYwKTsKICAgICAgICAgICAgdmFyIGVudHJ5T2Zmc2V0ID0gbnVtYmVyQmV0d2Vlbih2YXJzLmVudHJ5X29mZnNldCwgODgsIDIwLCAxNjApOwogICAgICAgICAgICB2YXIgZm9udFdlaWdodCA9CiAgICAgICAgICAgICAgdmFycy5mb250X3dlaWdodCA9PT0gIjUwMCIgfHwgdmFycy5mb250X3dlaWdodCA9PT0gIjcwMCIgfHwgdmFycy5mb250X3dlaWdodCA9PT0gIjgwMCIKICAgICAgICAgICAgICAgID8gdmFycy5mb250X3dlaWdodAogICAgICAgICAgICAgICAgOiAiNjAwIjsKCiAgICAgICAgICAgIHN0YWdlLnN0eWxlLmZvbnRXZWlnaHQgPSBmb250V2VpZ2h0OwogICAgICAgICAgICBzdGFnZS5zZXRBdHRyaWJ1dGUoImFyaWEtbGFiZWwiLCB0ZXh0KTsKCiAgICAgICAgICAgIHZhciBjYW52YXMgPSBkb2N1bWVudC5jcmVhdGVFbGVtZW50KCJjYW52YXMiKTsKICAgICAgICAgICAgdmFyIGNvbnRleHQgPSBjYW52YXMuZ2V0Q29udGV4dCgiMmQiKTsKICAgICAgICAgICAgdmFyIG1lYXN1cmVGb250ID0gJy1hcHBsZS1zeXN0ZW0sIEJsaW5rTWFjU3lzdGVtRm9udCwgIlNlZ29lIFVJIiwgUm9ib3RvLCBzYW5zLXNlcmlmJzsKICAgICAgICAgICAgdmFyIGdhcFJhdGlvID0gMTAgLyA3MjsKCiAgICAgICAgICAgIGZ1bmN0aW9uIG1lYXN1cmUoZm9udFNpemUpIHsKICAgICAgICAgICAgICBpZiAoIWNvbnRleHQpIHsKICAgICAgICAgICAgICAgIHJldHVybiB3b3Jkcy5tYXAoZnVuY3Rpb24gKHdvcmQpIHsKICAgICAgICAgICAgICAgICAgcmV0dXJuIHdvcmQubGVuZ3RoICogZm9udFNpemUgKiAwLjU1OwogICAgICAgICAgICAgICAgfSk7CiAgICAgICAgICAgICAgfQogICAgICAgICAgICAgIGNvbnRleHQuZm9udCA9IGZvbnRXZWlnaHQgKyAiICIgKyBmb250U2l6ZSArICJweCAiICsgbWVhc3VyZUZvbnQ7CiAgICAgICAgICAgICAgcmV0dXJuIHdvcmRzLm1hcChmdW5jdGlvbiAod29yZCkgewogICAgICAgICAgICAgICAgcmV0dXJuIGNvbnRleHQubWVhc3VyZVRleHQod29yZCkud2lkdGg7CiAgICAgICAgICAgICAgfSk7CiAgICAgICAgICAgIH0KCiAgICAgICAgICAgIHZhciBmb250U2l6ZSA9IHJlcXVlc3RlZEZvbnRTaXplOwogICAgICAgICAgICB2YXIgd2lkdGhzID0gbWVhc3VyZShmb250U2l6ZSk7CiAgICAgICAgICAgIHZhciBnYXAgPSBmb250U2l6ZSAqIGdhcFJhdGlvOwogICAgICAgICAgICB2YXIgZnVsbFdpZHRoID0gd2lkdGhzLnJlZHVjZSgKICAgICAgICAgICAgICBmdW5jdGlvbiAodG90YWwsIHdpZHRoKSB7CiAgICAgICAgICAgICAgICByZXR1cm4gdG90YWwgKyB3aWR0aDsKICAgICAgICAgICAgICB9LAogICAgICAgICAgICAgIGdhcCAqIE1hdGgubWF4KDAsIHdvcmRzLmxlbmd0aCAtIDEpLAogICAgICAgICAgICApOwogICAgICAgICAgICB2YXIgbWF4V2lkdGggPSBNYXRoLm1heCgxLCByb290LmNsaWVudFdpZHRoICogMC45KTsKCiAgICAgICAgICAgIGlmIChmdWxsV2lkdGggPiBtYXhXaWR0aCkgewogICAgICAgICAgICAgIGZvbnRTaXplID0gTWF0aC5tYXgoMjQsIGZvbnRTaXplICogKG1heFdpZHRoIC8gZnVsbFdpZHRoKSk7CiAgICAgICAgICAgICAgd2lkdGhzID0gbWVhc3VyZShmb250U2l6ZSk7CiAgICAgICAgICAgICAgZ2FwID0gZm9udFNpemUgKiBnYXBSYXRpbzsKICAgICAgICAgICAgfQoKICAgICAgICAgICAgc3RhZ2Uuc3R5bGUuZm9udFNpemUgPSBmb250U2l6ZSArICJweCI7CgogICAgICAgICAgICB2YXIgcG9zaXRpb25zQXQgPSBbXTsKICAgICAgICAgICAgZm9yICh2YXIgY291bnQgPSAxOyBjb3VudCA8PSB3b3Jkcy5sZW5ndGg7IGNvdW50ICs9IDEpIHsKICAgICAgICAgICAgICB2YXIgdG90YWwgPSBnYXAgKiAoY291bnQgLSAxKTsKICAgICAgICAgICAgICBmb3IgKHZhciB3aWR0aEluZGV4ID0gMDsgd2lkdGhJbmRleCA8IGNvdW50OyB3aWR0aEluZGV4ICs9IDEpIHsKICAgICAgICAgICAgICAgIHRvdGFsICs9IHdpZHRoc1t3aWR0aEluZGV4XTsKICAgICAgICAgICAgICB9CgogICAgICAgICAgICAgIHZhciBjdXJzb3IgPSAtdG90YWwgLyAyOwogICAgICAgICAgICAgIHZhciBwb3NpdGlvbnMgPSBbXTsKICAgICAgICAgICAgICBmb3IgKHZhciBwb3NpdGlvbkluZGV4ID0gMDsgcG9zaXRpb25JbmRleCA8IGNvdW50OyBwb3NpdGlvbkluZGV4ICs9IDEpIHsKICAgICAgICAgICAgICAgIHBvc2l0aW9ucy5wdXNoKGN1cnNvciArIHdpZHRoc1twb3NpdGlvbkluZGV4XSAvIDIpOwogICAgICAgICAgICAgICAgY3Vyc29yICs9IHdpZHRoc1twb3NpdGlvbkluZGV4XSArIGdhcDsKICAgICAgICAgICAgICB9CiAgICAgICAgICAgICAgcG9zaXRpb25zQXQucHVzaChwb3NpdGlvbnMpOwogICAgICAgICAgICB9CgogICAgICAgICAgICB2YXIgZWxlbWVudHMgPSB3b3Jkcy5tYXAoZnVuY3Rpb24gKHdvcmQsIGluZGV4KSB7CiAgICAgICAgICAgICAgdmFyIGVsZW1lbnQgPSBkb2N1bWVudC5jcmVhdGVFbGVtZW50KCJzcGFuIik7CiAgICAgICAgICAgICAgZWxlbWVudC5pZCA9ICJrY2Itd29yZC0iICsgaW5kZXg7CiAgICAgICAgICAgICAgZWxlbWVudC5jbGFzc05hbWUgPSAia2NiLXdvcmQiOwogICAgICAgICAgICAgIGVsZW1lbnQudGV4dENvbnRlbnQgPSB3b3JkOwogICAgICAgICAgICAgIGVsZW1lbnQuc2V0QXR0cmlidXRlKCJhcmlhLWhpZGRlbiIsICJ0cnVlIik7CiAgICAgICAgICAgICAgc3RhZ2UuYXBwZW5kQ2hpbGQoZWxlbWVudCk7CiAgICAgICAgICAgICAgcmV0dXJuIGVsZW1lbnQ7CiAgICAgICAgICAgIH0pOwoKICAgICAgICAgICAgZ3NhcC5yZWdpc3RlclBsdWdpbihDdXN0b21FYXNlKTsKICAgICAgICAgICAgdmFyIGVudHJ5RWFzZSA9IEN1c3RvbUVhc2UuY3JlYXRlKCJrY2ItZW50cnktZWFzZSIsICJNMCwwIEMwLjIsMC44IDAuMiwxIDEsMSIpOwogICAgICAgICAgICB2YXIgZHVyYXRpb24gPSBNYXRoLm1heCgwLjAwMSwgcGFyc2VGbG9hdChyb290LmRhdGFzZXQuZHVyYXRpb24gfHwgIjIiKSk7CiAgICAgICAgICAgIHZhciBmaXJzdER1cmF0aW9uID0gMTAgLyAzMDsKICAgICAgICAgICAgdmFyIHB1c2hEdXJhdGlvbiA9IDEzIC8gMzA7CiAgICAgICAgICAgIHZhciBhdXRob3JlZEJ1aWxkRHVyYXRpb24gPQogICAgICAgICAgICAgIGZpcnN0RHVyYXRpb24gKyBNYXRoLm1heCgwLCB3b3Jkcy5sZW5ndGggLSAxKSAqIHB1c2hEdXJhdGlvbjsKICAgICAgICAgICAgdmFyIGF2YWlsYWJsZUJ1aWxkRHVyYXRpb24gPSBNYXRoLm1heCgwLjI1LCBkdXJhdGlvbiAtIDAuNSk7CiAgICAgICAgICAgIHZhciB0aW1pbmdTY2FsZSA9IE1hdGgubWluKDEsIGF2YWlsYWJsZUJ1aWxkRHVyYXRpb24gLyBhdXRob3JlZEJ1aWxkRHVyYXRpb24pOwogICAgICAgICAgICBmaXJzdER1cmF0aW9uICo9IHRpbWluZ1NjYWxlOwogICAgICAgICAgICBwdXNoRHVyYXRpb24gKj0gdGltaW5nU2NhbGU7CgogICAgICAgICAgICB2YXIgdGwgPSBnc2FwLnRpbWVsaW5lKHsgcGF1c2VkOiB0cnVlIH0pOwoKICAgICAgICAgICAgZWxlbWVudHMuZm9yRWFjaChmdW5jdGlvbiAoZWxlbWVudCwgaW5kZXgpIHsKICAgICAgICAgICAgICB2YXIgdGFyZ2V0WCA9IHBvc2l0aW9uc0F0W2luZGV4XVtpbmRleF07CiAgICAgICAgICAgICAgdmFyIHN0YXJ0ID0gaW5kZXggPT09IDAgPyAwIDogZmlyc3REdXJhdGlvbiArIChpbmRleCAtIDEpICogcHVzaER1cmF0aW9uOwogICAgICAgICAgICAgIHZhciBtb3ZlRHVyYXRpb24gPSBpbmRleCA9PT0gMCA/IGZpcnN0RHVyYXRpb24gOiBwdXNoRHVyYXRpb247CiAgICAgICAgICAgICAgdmFyIGZyb21YID0gaW5kZXggPT09IDAgPyB0YXJnZXRYIDogdGFyZ2V0WCArIGVudHJ5T2Zmc2V0OwogICAgICAgICAgICAgIHZhciBmcm9tWSA9IGluZGV4ID09PSAwID8gNiA6IDA7CgogICAgICAgICAgICAgIHRsLmZyb21UbygKICAgICAgICAgICAgICAgIGVsZW1lbnQsCiAgICAgICAgICAgICAgICB7CiAgICAgICAgICAgICAgICAgIHg6IGZyb21YLAogICAgICAgICAgICAgICAgICB5OiBmcm9tWSwKICAgICAgICAgICAgICAgICAgeFBlcmNlbnQ6IC01MCwKICAgICAgICAgICAgICAgICAgeVBlcmNlbnQ6IC01MCwKICAgICAgICAgICAgICAgICAgc2NhbGU6IDAuOTkyLAogICAgICAgICAgICAgICAgICBvcGFjaXR5OiAwLAogICAgICAgICAgICAgICAgICAiLS1rY2ItYmx1ciI6ICIzLjVweCIsCiAgICAgICAgICAgICAgICB9LAogICAgICAgICAgICAgICAgewogICAgICAgICAgICAgICAgICB4OiB0YXJnZXRYLAogICAgICAgICAgICAgICAgICB5OiAwLAogICAgICAgICAgICAgICAgICB4UGVyY2VudDogLTUwLAogICAgICAgICAgICAgICAgICB5UGVyY2VudDogLTUwLAogICAgICAgICAgICAgICAgICBzY2FsZTogMSwKICAgICAgICAgICAgICAgICAgb3BhY2l0eTogMSwKICAgICAgICAgICAgICAgICAgIi0ta2NiLWJsdXIiOiAiMHB4IiwKICAgICAgICAgICAgICAgICAgZHVyYXRpb246IG1vdmVEdXJhdGlvbiwKICAgICAgICAgICAgICAgICAgZWFzZTogZW50cnlFYXNlLAogICAgICAgICAgICAgICAgICBpbW1lZGlhdGVSZW5kZXI6IGluZGV4ID09PSAwLAogICAgICAgICAgICAgICAgfSwKICAgICAgICAgICAgICAgIHN0YXJ0LAogICAgICAgICAgICAgICk7CgogICAgICAgICAgICAgIGlmIChpbmRleCA9PT0gMCkgcmV0dXJuOwoKICAgICAgICAgICAgICBmb3IgKHZhciBwcmlvckluZGV4ID0gMDsgcHJpb3JJbmRleCA8IGluZGV4OyBwcmlvckluZGV4ICs9IDEpIHsKICAgICAgICAgICAgICAgIHZhciBwcmlvckVsZW1lbnQgPSBlbGVtZW50c1twcmlvckluZGV4XTsKICAgICAgICAgICAgICAgIHZhciBuZXh0WCA9IHBvc2l0aW9uc0F0W2luZGV4XVtwcmlvckluZGV4XTsKICAgICAgICAgICAgICAgIHZhciBibHVyUGVhayA9IHN0YXJ0ICsgbW92ZUR1cmF0aW9uIC8gMjsKCiAgICAgICAgICAgICAgICB0bC50byhwcmlvckVsZW1lbnQsIHsgeDogbmV4dFgsIGR1cmF0aW9uOiBtb3ZlRHVyYXRpb24sIGVhc2U6IGVudHJ5RWFzZSB9LCBzdGFydCk7CiAgICAgICAgICAgICAgICB0bC50bygKICAgICAgICAgICAgICAgICAgcHJpb3JFbGVtZW50LAogICAgICAgICAgICAgICAgICB7ICItLWtjYi1ibHVyIjogIjAuOHB4IiwgZHVyYXRpb246IG1vdmVEdXJhdGlvbiAvIDIsIGVhc2U6ICJub25lIiB9LAogICAgICAgICAgICAgICAgICBzdGFydCwKICAgICAgICAgICAgICAgICk7CiAgICAgICAgICAgICAgICB0bC50bygKICAgICAgICAgICAgICAgICAgcHJpb3JFbGVtZW50LAogICAgICAgICAgICAgICAgICB7ICItLWtjYi1ibHVyIjogIjBweCIsIGR1cmF0aW9uOiBtb3ZlRHVyYXRpb24gLyAyLCBlYXNlOiAibm9uZSIgfSwKICAgICAgICAgICAgICAgICAgYmx1clBlYWssCiAgICAgICAgICAgICAgICApOwogICAgICAgICAgICAgIH0KICAgICAgICAgICAgfSk7CgogICAgICAgICAgICB0bC5zZWVrKDApOwogICAgICAgICAgICB3aW5kb3cuX190aW1lbGluZXMgPSB3aW5kb3cuX190aW1lbGluZXMgfHwge307CiAgICAgICAgICAgIHdpbmRvdy5fX3RpbWVsaW5lc1sia2luZXRpYy1jZW50ZXItYnVpbGQiXSA9IHRsOwogICAgICAgICAgfSkoKTsKICAgICAgICA8L3NjcmlwdD4KICAgICAgPC9kaXY+CiAgICA8L3RlbXBsYXRlPgogIDwvYm9keT4KPC9odG1sPgo=\" data-start=\"0\" data-duration=\"5\" data-track-index=\"0\" data-width=\"1920\" data-height=\"1080\"></div>\n  </div>\n  <script>\n    window.__timelines = window.__timelines || {};\n    window.__timelines[\"preview-root\"] = gsap.timeline({ paused: true });\n  </script>\n</body>\n</html>"
+}
diff --git a/registry/catalog-artifact/local-vectors.bin b/registry/catalog-artifact/local-vectors.bin
index 9a7755d02..2affb288b 100644
Binary files a/registry/catalog-artifact/local-vectors.bin and b/registry/catalog-artifact/local-vectors.bin differ
diff --git a/registry/catalog-artifact/local-vectors.json b/registry/catalog-artifact/local-vectors.json
index f99edde1b..af3bca1dd 100644
--- a/registry/catalog-artifact/local-vectors.json
+++ b/registry/catalog-artifact/local-vectors.json
@@ -2,7 +2,7 @@
   "model": "bge-small-en-v1.5",
   "modelRevision": "ea104dacec62c0de699686887e3f920caeb4f3e3",
   "dimensions": 384,
-  "revision": "2611d04335aacf5a70649019f948e5ba2f474c38bc45cd59e179d71294cd8cb8",
+  "revision": "fa440b4e9cf8dd760a65776d39a118a57e02fb52c1b0efd9c1d2e9ec04b11930",
   "names": [
     "ai-chat-reveal",
     "animated-bar-chart",
@@ -156,6 +156,7 @@
     "ios26-liquid-glass",
     "iris-reveal",
     "keyframe-scrub-stack",
+    "kinetic-center-build",
     "kinetic-type-swap",
     "light-leak",
     "light-sweep-pass",
diff --git a/registry/components/kinetic-center-build/demo.html b/registry/components/kinetic-center-build/demo.html
new file mode 100644
index 000000000..9cd36d3d2
--- /dev/null
+++ b/registry/components/kinetic-center-build/demo.html
@@ -0,0 +1,86 @@
+<!doctype html>
+<!--
+  Kinetic Center Build demo. The 1280x720 frame and default values match the
+  pinned Hyfrme parity fixture so reviewers can compare the motion directly.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1280, height=720" />
+    <title>Kinetic Center Build Demo</title>
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css2?family=Geist:wght@600&amp;display=block"
+    />
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1280px;
+        height: 720px;
+        overflow: hidden;
+      }
+
+      #root {
+        --font-display: Geist, system-ui, sans-serif;
+        position: relative;
+        width: 1280px;
+        height: 720px;
+        overflow: hidden;
+      }
+
+      .kcb-demo-background,
+      .kcb-demo-mount {
+        position: absolute;
+        inset: 0;
+        width: 1280px;
+        height: 720px;
+      }
+
+      .kcb-demo-background {
+        background: #ffffff;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="kinetic-center-build-demo"
+      data-start="0"
+      data-width="1280"
+      data-height="720"
+      data-duration="2"
+      data-fps="30"
+    >
+      <div
+        id="kcb-demo-background"
+        class="kcb-demo-background clip"
+        data-start="0"
+        data-duration="2"
+        data-track-index="0"
+      ></div>
+      <div
+        id="kcb-demo-mount"
+        class="kcb-demo-mount clip"
+        data-composition-id="kinetic-center-build"
+        data-composition-src="./kinetic-center-build.html"
+        data-start="0"
+        data-duration="2"
+        data-track-index="1"
+        data-width="1280"
+        data-height="720"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["kinetic-center-build-demo"] = gsap.timeline({ paused: true });
+    </script>
+  </body>
+</html>
diff --git a/registry/components/kinetic-center-build/kinetic-center-build.html b/registry/components/kinetic-center-build/kinetic-center-build.html
new file mode 100644
index 000000000..809e8467f
--- /dev/null
+++ b/registry/components/kinetic-center-build/kinetic-center-build.html
@@ -0,0 +1,284 @@
+<!doctype html>
+<!--
+  Kinetic Center Build
+
+  Words enter from the right while the existing phrase shifts left, keeping
+  every intermediate phrase centered until the final line locks in place.
+
+  Native HyperFrames port prepared through Hyfrme from:
+  https://github.com/Remocn/remocn/blob/ea730a20b4ab09430ee7292aebc847c002375151/registry/remocn/kinetic-center-build/index.tsx
+
+  MIT License
+
+  Copyright (c) 2026 Remocn
+
+  Permission is hereby granted, free of charge, to any person obtaining a copy
+  of this software and associated documentation files (the "Software"), to deal
+  in the Software without restriction, including without limitation the rights
+  to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+  copies of the Software, and to permit persons to whom the Software is
+  furnished to do so, subject to the following conditions:
+
+  The above copyright notice and this permission notice shall be included in all
+  copies or substantial portions of the Software.
+
+  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+  SOFTWARE.
+-->
+<html
+  lang="en"
+  data-composition-id="kinetic-center-build"
+  data-composition-duration="2"
+  data-composition-variables='[
+    { "id": "text", "type": "string", "role": "content", "label": "Text", "description": "Short phrase that builds one word at a time.", "default": "Words push left." },
+    { "id": "font_size", "type": "number", "role": "style", "label": "Font size", "description": "Maximum text size in pixels. Longer phrases shrink to stay inside the frame.", "default": 72, "min": 36, "max": 160, "step": 2, "unit": "px" },
+    { "id": "entry_offset", "type": "number", "role": "motion", "label": "Entry offset", "description": "Horizontal distance each new word travels before it lands.", "default": 88, "min": 20, "max": 160, "step": 4, "unit": "px" },
+    { "id": "color", "type": "color", "role": "style", "label": "Color", "description": "Text color for the full phrase.", "default": "#171717" },
+    { "id": "font_weight", "type": "enum", "role": "style", "label": "Font weight", "description": "Weight used by every word in the phrase.", "default": "600", "options": [{ "value": "500", "label": "Medium" }, { "value": "600", "label": "Semibold" }, { "value": "700", "label": "Bold" }, { "value": "800", "label": "Extra bold" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Kinetic Center Build</title>
+  </head>
+  <body>
+    <template>
+      <link
+        rel="stylesheet"
+        href="https://fonts.googleapis.com/css2?family=Geist:wght@500;600;700;800&amp;display=block"
+      />
+
+      <style>
+        *,
+        *::before,
+        *::after {
+          box-sizing: border-box;
+        }
+
+        #root {
+          position: absolute;
+          inset: 0;
+          overflow: hidden;
+          container-type: size;
+          isolation: isolate;
+          color: var(--color, #171717);
+          font-family: var(--font-display, Geist, system-ui, sans-serif);
+          pointer-events: none;
+        }
+
+        .kcb-clip,
+        .kcb-stage {
+          position: absolute;
+          inset: 0;
+          overflow: hidden;
+        }
+
+        .kcb-stage {
+          letter-spacing: -0.03em;
+          white-space: nowrap;
+        }
+
+        .kcb-word {
+          --kcb-blur: 0px;
+          position: absolute;
+          left: 50%;
+          top: 50%;
+          display: inline-block;
+          color: inherit;
+          line-height: 1;
+          white-space: nowrap;
+          opacity: 0;
+          filter: blur(var(--kcb-blur));
+          backface-visibility: hidden;
+          will-change: transform, filter, opacity;
+        }
+      </style>
+
+      <div id="root" data-composition-id="kinetic-center-build" data-duration="2" data-fps="30">
+        <div
+          id="kcb-clip"
+          class="kcb-clip clip"
+          data-start="0"
+          data-duration="2"
+          data-track-index="0"
+        >
+          <div id="kcb-stage" class="kcb-stage" role="img"></div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/CustomEase.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var stage = document.getElementById("kcb-stage");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            function numberBetween(value, fallback, min, max) {
+              var parsed = Number(value);
+              if (!Number.isFinite(parsed)) return fallback;
+              return Math.min(max, Math.max(min, parsed));
+            }
+
+            var text = typeof vars.text === "string" ? vars.text.trim() : "";
+            if (!text) text = "Words push left.";
+
+            var words = text.split(/\s+/);
+            var requestedFontSize = numberBetween(vars.font_size, 72, 36, 160);
+            var entryOffset = numberBetween(vars.entry_offset, 88, 20, 160);
+            var fontWeight =
+              vars.font_weight === "500" || vars.font_weight === "700" || vars.font_weight === "800"
+                ? vars.font_weight
+                : "600";
+
+            stage.style.fontWeight = fontWeight;
+            stage.setAttribute("aria-label", text);
+
+            var canvas = document.createElement("canvas");
+            var context = canvas.getContext("2d");
+            var measureFont = '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif';
+            var gapRatio = 10 / 72;
+
+            function measure(fontSize) {
+              if (!context) {
+                return words.map(function (word) {
+                  return word.length * fontSize * 0.55;
+                });
+              }
+              context.font = fontWeight + " " + fontSize + "px " + measureFont;
+              return words.map(function (word) {
+                return context.measureText(word).width;
+              });
+            }
+
+            var fontSize = requestedFontSize;
+            var widths = measure(fontSize);
+            var gap = fontSize * gapRatio;
+            var fullWidth = widths.reduce(
+              function (total, width) {
+                return total + width;
+              },
+              gap * Math.max(0, words.length - 1),
+            );
+            var maxWidth = Math.max(1, root.clientWidth * 0.9);
+
+            if (fullWidth > maxWidth) {
+              fontSize = Math.max(24, fontSize * (maxWidth / fullWidth));
+              widths = measure(fontSize);
+              gap = fontSize * gapRatio;
+            }
+
+            stage.style.fontSize = fontSize + "px";
+
+            var positionsAt = [];
+            for (var count = 1; count <= words.length; count += 1) {
+              var total = gap * (count - 1);
+              for (var widthIndex = 0; widthIndex < count; widthIndex += 1) {
+                total += widths[widthIndex];
+              }
+
+              var cursor = -total / 2;
+              var positions = [];
+              for (var positionIndex = 0; positionIndex < count; positionIndex += 1) {
+                positions.push(cursor + widths[positionIndex] / 2);
+                cursor += widths[positionIndex] + gap;
+              }
+              positionsAt.push(positions);
+            }
+
+            var elements = words.map(function (word, index) {
+              var element = document.createElement("span");
+              element.id = "kcb-word-" + index;
+              element.className = "kcb-word";
+              element.textContent = word;
+              element.setAttribute("aria-hidden", "true");
+              stage.appendChild(element);
+              return element;
+            });
+
+            gsap.registerPlugin(CustomEase);
+            var entryEase = CustomEase.create("kcb-entry-ease", "M0,0 C0.2,0.8 0.2,1 1,1");
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "2"));
+            var firstDuration = 10 / 30;
+            var pushDuration = 13 / 30;
+            var authoredBuildDuration =
+              firstDuration + Math.max(0, words.length - 1) * pushDuration;
+            var availableBuildDuration = Math.max(0.25, duration - 0.5);
+            var timingScale = Math.min(1, availableBuildDuration / authoredBuildDuration);
+            firstDuration *= timingScale;
+            pushDuration *= timingScale;
+
+            var tl = gsap.timeline({ paused: true });
+
+            elements.forEach(function (element, index) {
+              var targetX = positionsAt[index][index];
+              var start = index === 0 ? 0 : firstDuration + (index - 1) * pushDuration;
+              var moveDuration = index === 0 ? firstDuration : pushDuration;
+              var fromX = index === 0 ? targetX : targetX + entryOffset;
+              var fromY = index === 0 ? 6 : 0;
+
+              tl.fromTo(
+                element,
+                {
+                  x: fromX,
+                  y: fromY,
+                  xPercent: -50,
+                  yPercent: -50,
+                  scale: 0.992,
+                  opacity: 0,
+                  "--kcb-blur": "3.5px",
+                },
+                {
+                  x: targetX,
+                  y: 0,
+                  xPercent: -50,
+                  yPercent: -50,
+                  scale: 1,
+                  opacity: 1,
+                  "--kcb-blur": "0px",
+                  duration: moveDuration,
+                  ease: entryEase,
+                  immediateRender: index === 0,
+                },
+                start,
+              );
+
+              if (index === 0) return;
+
+              for (var priorIndex = 0; priorIndex < index; priorIndex += 1) {
+                var priorElement = elements[priorIndex];
+                var nextX = positionsAt[index][priorIndex];
+                var blurPeak = start + moveDuration / 2;
+
+                tl.to(priorElement, { x: nextX, duration: moveDuration, ease: entryEase }, start);
+                tl.to(
+                  priorElement,
+                  { "--kcb-blur": "0.8px", duration: moveDuration / 2, ease: "none" },
+                  start,
+                );
+                tl.to(
+                  priorElement,
+                  { "--kcb-blur": "0px", duration: moveDuration / 2, ease: "none" },
+                  blurPeak,
+                );
+              }
+            });
+
+            tl.seek(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["kinetic-center-build"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/registry/components/kinetic-center-build/registry-item.json b/registry/components/kinetic-center-build/registry-item.json
new file mode 100644
index 000000000..fe2d37d95
--- /dev/null
+++ b/registry/components/kinetic-center-build/registry-item.json
@@ -0,0 +1,85 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "kinetic-center-build",
+  "type": "hyperframes:component",
+  "title": "Kinetic Center Build",
+  "description": "Words enter from the right and push the growing phrase left until the final line locks centered.",
+  "tags": ["motion-primitive", "text-effects", "kinetic-type", "reveal", "remocn-port"],
+  "jobs": ["reveal"],
+  "family": "text-effects",
+  "profile": "build",
+  "author": "Remocn",
+  "authorUrl": "https://github.com/Remocn/remocn",
+  "license": "MIT",
+  "syncPoints": [
+    {
+      "id": "phrase-locked",
+      "phase": "in",
+      "offset": 1.2,
+      "description": "Calibrated to the default three-word text; custom word counts change the lock time."
+    }
+  ],
+  "files": [
+    {
+      "path": "kinetic-center-build.html",
+      "target": "compositions/components/kinetic-center-build.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "variables": [
+    {
+      "id": "text",
+      "type": "string",
+      "role": "content",
+      "label": "Text",
+      "description": "Short phrase that builds one word at a time.",
+      "default": "Words push left."
+    },
+    {
+      "id": "font_size",
+      "type": "number",
+      "role": "style",
+      "label": "Font size",
+      "description": "Maximum text size in pixels. Longer phrases shrink to stay inside the frame.",
+      "default": 72,
+      "min": 36,
+      "max": 160,
+      "step": 2,
+      "unit": "px"
+    },
+    {
+      "id": "entry_offset",
+      "type": "number",
+      "role": "motion",
+      "label": "Entry offset",
+      "description": "Horizontal distance each new word travels before it lands.",
+      "default": 88,
+      "min": 20,
+      "max": 160,
+      "step": 4,
+      "unit": "px"
+    },
+    {
+      "id": "color",
+      "type": "color",
+      "role": "style",
+      "label": "Color",
+      "description": "Text color for the full phrase.",
+      "default": "#171717"
+    },
+    {
+      "id": "font_weight",
+      "type": "enum",
+      "role": "style",
+      "label": "Font weight",
+      "description": "Weight used by every word in the phrase.",
+      "default": "600",
+      "options": [
+        { "value": "500", "label": "Medium" },
+        { "value": "600", "label": "Semibold" },
+        { "value": "700", "label": "Bold" },
+        { "value": "800", "label": "Extra bold" }
+      ]
+    }
+  ]
+}
diff --git a/registry/registry.json b/registry/registry.json
index 6372021e2..aa25fe38a 100644
--- a/registry/registry.json
+++ b/registry/registry.json
@@ -995,6 +995,10 @@
       "name": "keyframe-scrub-stack",
       "type": "hyperframes:component"
     },
+    {
+      "name": "kinetic-center-build",
+      "type": "hyperframes:component"
+    },
     {
       "name": "kinetic-type-swap",
       "type": "hyperframes:component"
@@ -1533,6 +1537,6 @@
     }
   ],
   "catalogArtifact": {
-    "revision": "2611d04335aacf5a70649019f948e5ba2f474c38bc45cd59e179d71294cd8cb8"
+    "revision": "fa440b4e9cf8dd760a65776d39a118a57e02fb52c1b0efd9c1d2e9ec04b11930"
   }
 }
