diff --git a/docs/catalog/components/kinetic-center-build.mdx b/docs/catalog/components/kinetic-center-build.mdx
new file mode 100644
index 0000000000..402cb0ff70
--- /dev/null
+++ b/docs/catalog/components/kinetic-center-build.mdx
@@ -0,0 +1,649 @@
+---
+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@600&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 {
+          color: var(--color, #171717);
+          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.style.color = typeof vars.color === "string" ? vars.color : "#171717";
+            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@600&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 {
+          color: var(--color, #171717);
+          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.style.color = typeof vars.color === "string" ? vars.color : "#171717";
+            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 3fda075161..f21bd28da3 100644
--- a/docs/docs.json
+++ b/docs/docs.json
@@ -286,6 +286,7 @@
                   "catalog/blocks/hw-path-text",
                   "catalog/blocks/hw-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 24a956eeae..4050a8b42c 100644
--- a/docs/public/catalog-index.json
+++ b/docs/public/catalog-index.json
@@ -2260,6 +2260,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 0000000000..300ab7e66f
--- /dev/null
+++ b/docs/public/catalog/components/kinetic-center-build.json
@@ -0,0 +1 @@
+{"html":"<!doctype html>\n<!--\n  Kinetic Center Build demo. The 1280x720 frame and default values match the\n  pinned Hyfrme parity fixture so reviewers can compare the motion directly.\n-->\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=1280, height=720\" />\n    <title>Kinetic Center Build Demo</title>\n    <link\n      rel=\"stylesheet\"\n      href=\"https://fonts.googleapis.com/css2?family=Geist:wght@600&amp;display=block\"\n    />\n    <style>\n      * {\n        margin: 0;\n        padding: 0;\n        box-sizing: border-box;\n      }\n\n      html,\n      body {\n        width: 1280px;\n        height: 720px;\n        overflow: hidden;\n      }\n\n      #root {\n        --font-display: Geist, system-ui, sans-serif;\n        position: relative;\n        width: 1280px;\n        height: 720px;\n        overflow: hidden;\n      }\n\n      .kcb-demo-background,\n      .kcb-demo-mount {\n        position: absolute;\n        inset: 0;\n        width: 1280px;\n        height: 720px;\n      }\n\n      .kcb-demo-background {\n        background: #ffffff;\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"root\"\n      data-composition-id=\"kinetic-center-build-demo\"\n      data-start=\"0\"\n      data-width=\"1280\"\n      data-height=\"720\"\n      data-duration=\"2\"\n      data-fps=\"30\"\n    >\n      <div\n        id=\"kcb-demo-background\"\n        class=\"kcb-demo-background clip\"\n        data-start=\"0\"\n        data-duration=\"2\"\n        data-track-index=\"0\"\n      ></div>\n      <div\n        id=\"kcb-demo-mount\"\n        class=\"kcb-demo-mount clip\"\n        data-composition-id=\"kinetic-center-build\"\n        data-composition-src=\"data:text/html;base64,PCFkb2N0eXBlIGh0bWw+CjwhLS0KICBLaW5ldGljIENlbnRlciBCdWlsZAoKICBXb3JkcyBlbnRlciBmcm9tIHRoZSByaWdodCB3aGlsZSB0aGUgZXhpc3RpbmcgcGhyYXNlIHNoaWZ0cyBsZWZ0LCBrZWVwaW5nCiAgZXZlcnkgaW50ZXJtZWRpYXRlIHBocmFzZSBjZW50ZXJlZCB1bnRpbCB0aGUgZmluYWwgbGluZSBsb2NrcyBpbiBwbGFjZS4KCiAgTmF0aXZlIEh5cGVyRnJhbWVzIHBvcnQgcHJlcGFyZWQgdGhyb3VnaCBIeWZybWUgZnJvbToKICBodHRwczovL2dpdGh1Yi5jb20vUmVtb2NuL3JlbW9jbi9ibG9iL2VhNzMwYTIwYjRhYjA5NDMwZWU3MjkyYWViYzg0N2MwMDIzNzUxNTEvcmVnaXN0cnkvcmVtb2NuL2tpbmV0aWMtY2VudGVyLWJ1aWxkL2luZGV4LnRzeAoKICBNSVQgTGljZW5zZQoKICBDb3B5cmlnaHQgKGMpIDIwMjYgUmVtb2NuCgogIFBlcm1pc3Npb24gaXMgaGVyZWJ5IGdyYW50ZWQsIGZyZWUgb2YgY2hhcmdlLCB0byBhbnkgcGVyc29uIG9idGFpbmluZyBhIGNvcHkKICBvZiB0aGlzIHNvZnR3YXJlIGFuZCBhc3NvY2lhdGVkIGRvY3VtZW50YXRpb24gZmlsZXMgKHRoZSAiU29mdHdhcmUiKSwgdG8gZGVhbAogIGluIHRoZSBTb2Z0d2FyZSB3aXRob3V0IHJlc3RyaWN0aW9uLCBpbmNsdWRpbmcgd2l0aG91dCBsaW1pdGF0aW9uIHRoZSByaWdodHMKICB0byB1c2UsIGNvcHksIG1vZGlmeSwgbWVyZ2UsIHB1Ymxpc2gsIGRpc3RyaWJ1dGUsIHN1YmxpY2Vuc2UsIGFuZC9vciBzZWxsCiAgY29waWVzIG9mIHRoZSBTb2Z0d2FyZSwgYW5kIHRvIHBlcm1pdCBwZXJzb25zIHRvIHdob20gdGhlIFNvZnR3YXJlIGlzCiAgZnVybmlzaGVkIHRvIGRvIHNvLCBzdWJqZWN0IHRvIHRoZSBmb2xsb3dpbmcgY29uZGl0aW9uczoKCiAgVGhlIGFib3ZlIGNvcHlyaWdodCBub3RpY2UgYW5kIHRoaXMgcGVybWlzc2lvbiBub3RpY2Ugc2hhbGwgYmUgaW5jbHVkZWQgaW4gYWxsCiAgY29waWVzIG9yIHN1YnN0YW50aWFsIHBvcnRpb25zIG9mIHRoZSBTb2Z0d2FyZS4KCiAgVEhFIFNPRlRXQVJFIElTIFBST1ZJREVEICJBUyBJUyIsIFdJVEhPVVQgV0FSUkFOVFkgT0YgQU5ZIEtJTkQsIEVYUFJFU1MgT1IKICBJTVBMSUVELCBJTkNMVURJTkcgQlVUIE5PVCBMSU1JVEVEIFRPIFRIRSBXQVJSQU5USUVTIE9GIE1FUkNIQU5UQUJJTElUWSwKICBGSVRORVNTIEZPUiBBIFBBUlRJQ1VMQVIgUFVSUE9TRSBBTkQgTk9OSU5GUklOR0VNRU5ULiBJTiBOTyBFVkVOVCBTSEFMTCBUSEUKICBBVVRIT1JTIE9SIENPUFlSSUdIVCBIT0xERVJTIEJFIExJQUJMRSBGT1IgQU5ZIENMQUlNLCBEQU1BR0VTIE9SIE9USEVSCiAgTElBQklMSVRZLCBXSEVUSEVSIElOIEFOIEFDVElPTiBPRiBDT05UUkFDVCwgVE9SVCBPUiBPVEhFUldJU0UsIEFSSVNJTkcgRlJPTSwKICBPVVQgT0YgT1IgSU4gQ09OTkVDVElPTiBXSVRIIFRIRSBTT0ZUV0FSRSBPUiBUSEUgVVNFIE9SIE9USEVSIERFQUxJTkdTIElOIFRIRQogIFNPRlRXQVJFLgotLT4KPGh0bWwKICBsYW5nPSJlbiIKICBkYXRhLWNvbXBvc2l0aW9uLWlkPSJraW5ldGljLWNlbnRlci1idWlsZCIKICBkYXRhLWNvbXBvc2l0aW9uLWR1cmF0aW9uPSIyIgogIGRhdGEtY29tcG9zaXRpb24tdmFyaWFibGVzPSdbCiAgICB7ICJpZCI6ICJ0ZXh0IiwgInR5cGUiOiAic3RyaW5nIiwgInJvbGUiOiAiY29udGVudCIsICJsYWJlbCI6ICJUZXh0IiwgImRlc2NyaXB0aW9uIjogIlNob3J0IHBocmFzZSB0aGF0IGJ1aWxkcyBvbmUgd29yZCBhdCBhIHRpbWUuIiwgImRlZmF1bHQiOiAiV29yZHMgcHVzaCBsZWZ0LiIgfSwKICAgIHsgImlkIjogImZvbnRfc2l6ZSIsICJ0eXBlIjogIm51bWJlciIsICJyb2xlIjogInN0eWxlIiwgImxhYmVsIjogIkZvbnQgc2l6ZSIsICJkZXNjcmlwdGlvbiI6ICJNYXhpbXVtIHRleHQgc2l6ZSBpbiBwaXhlbHMuIExvbmdlciBwaHJhc2VzIHNocmluayB0byBzdGF5IGluc2lkZSB0aGUgZnJhbWUuIiwgImRlZmF1bHQiOiA3MiwgIm1pbiI6IDM2LCAibWF4IjogMTYwLCAic3RlcCI6IDIsICJ1bml0IjogInB4IiB9LAogICAgeyAiaWQiOiAiZW50cnlfb2Zmc2V0IiwgInR5cGUiOiAibnVtYmVyIiwgInJvbGUiOiAibW90aW9uIiwgImxhYmVsIjogIkVudHJ5IG9mZnNldCIsICJkZXNjcmlwdGlvbiI6ICJIb3Jpem9udGFsIGRpc3RhbmNlIGVhY2ggbmV3IHdvcmQgdHJhdmVscyBiZWZvcmUgaXQgbGFuZHMuIiwgImRlZmF1bHQiOiA4OCwgIm1pbiI6IDIwLCAibWF4IjogMTYwLCAic3RlcCI6IDQsICJ1bml0IjogInB4IiB9LAogICAgeyAiaWQiOiAiY29sb3IiLCAidHlwZSI6ICJjb2xvciIsICJyb2xlIjogInN0eWxlIiwgImxhYmVsIjogIkNvbG9yIiwgImRlc2NyaXB0aW9uIjogIlRleHQgY29sb3IgZm9yIHRoZSBmdWxsIHBocmFzZS4iLCAiZGVmYXVsdCI6ICIjMTcxNzE3IiB9LAogICAgeyAiaWQiOiAiZm9udF93ZWlnaHQiLCAidHlwZSI6ICJlbnVtIiwgInJvbGUiOiAic3R5bGUiLCAibGFiZWwiOiAiRm9udCB3ZWlnaHQiLCAiZGVzY3JpcHRpb24iOiAiV2VpZ2h0IHVzZWQgYnkgZXZlcnkgd29yZCBpbiB0aGUgcGhyYXNlLiIsICJkZWZhdWx0IjogIjYwMCIsICJvcHRpb25zIjogW3sgInZhbHVlIjogIjUwMCIsICJsYWJlbCI6ICJNZWRpdW0iIH0sIHsgInZhbHVlIjogIjYwMCIsICJsYWJlbCI6ICJTZW1pYm9sZCIgfSwgeyAidmFsdWUiOiAiNzAwIiwgImxhYmVsIjogIkJvbGQiIH0sIHsgInZhbHVlIjogIjgwMCIsICJsYWJlbCI6ICJFeHRyYSBib2xkIiB9XSB9CiAgXScKPgogIDxoZWFkPgogICAgPG1ldGEgY2hhcnNldD0iVVRGLTgiIC8+CiAgICA8dGl0bGU+S2luZXRpYyBDZW50ZXIgQnVpbGQ8L3RpdGxlPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDx0ZW1wbGF0ZT4KICAgICAgPGxpbmsKICAgICAgICByZWw9InN0eWxlc2hlZXQiCiAgICAgICAgaHJlZj0iaHR0cHM6Ly9mb250cy5nb29nbGVhcGlzLmNvbS9jc3MyP2ZhbWlseT1HZWlzdDp3Z2h0QDYwMCZhbXA7ZGlzcGxheT1ibG9jayIKICAgICAgLz4KCiAgICAgIDxzdHlsZT4KICAgICAgICAqLAogICAgICAgICo6OmJlZm9yZSwKICAgICAgICAqOjphZnRlciB7CiAgICAgICAgICBib3gtc2l6aW5nOiBib3JkZXItYm94OwogICAgICAgIH0KCiAgICAgICAgI3Jvb3QgewogICAgICAgICAgcG9zaXRpb246IGFic29sdXRlOwogICAgICAgICAgaW5zZXQ6IDA7CiAgICAgICAgICBvdmVyZmxvdzogaGlkZGVuOwogICAgICAgICAgY29udGFpbmVyLXR5cGU6IHNpemU7CiAgICAgICAgICBpc29sYXRpb246IGlzb2xhdGU7CiAgICAgICAgICBjb2xvcjogdmFyKC0tY29sb3IsICMxNzE3MTcpOwogICAgICAgICAgZm9udC1mYW1pbHk6IHZhcigtLWZvbnQtZGlzcGxheSwgR2Vpc3QsIHN5c3RlbS11aSwgc2Fucy1zZXJpZik7CiAgICAgICAgICBwb2ludGVyLWV2ZW50czogbm9uZTsKICAgICAgICB9CgogICAgICAgIC5rY2ItY2xpcCwKICAgICAgICAua2NiLXN0YWdlIHsKICAgICAgICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTsKICAgICAgICAgIGluc2V0OiAwOwogICAgICAgICAgb3ZlcmZsb3c6IGhpZGRlbjsKICAgICAgICB9CgogICAgICAgIC5rY2Itc3RhZ2UgewogICAgICAgICAgY29sb3I6IHZhcigtLWNvbG9yLCAjMTcxNzE3KTsKICAgICAgICAgIGxldHRlci1zcGFjaW5nOiAtMC4wM2VtOwogICAgICAgICAgd2hpdGUtc3BhY2U6IG5vd3JhcDsKICAgICAgICB9CgogICAgICAgIC5rY2Itd29yZCB7CiAgICAgICAgICAtLWtjYi1ibHVyOiAwcHg7CiAgICAgICAgICBwb3NpdGlvbjogYWJzb2x1dGU7CiAgICAgICAgICBsZWZ0OiA1MCU7CiAgICAgICAgICB0b3A6IDUwJTsKICAgICAgICAgIGRpc3BsYXk6IGlubGluZS1ibG9jazsKICAgICAgICAgIGNvbG9yOiBpbmhlcml0OwogICAgICAgICAgbGluZS1oZWlnaHQ6IDE7CiAgICAgICAgICB3aGl0ZS1zcGFjZTogbm93cmFwOwogICAgICAgICAgb3BhY2l0eTogMDsKICAgICAgICAgIGZpbHRlcjogYmx1cih2YXIoLS1rY2ItYmx1cikpOwogICAgICAgICAgYmFja2ZhY2UtdmlzaWJpbGl0eTogaGlkZGVuOwogICAgICAgICAgd2lsbC1jaGFuZ2U6IHRyYW5zZm9ybSwgZmlsdGVyLCBvcGFjaXR5OwogICAgICAgIH0KICAgICAgPC9zdHlsZT4KCiAgICAgIDxkaXYgaWQ9InJvb3QiIGRhdGEtY29tcG9zaXRpb24taWQ9ImtpbmV0aWMtY2VudGVyLWJ1aWxkIiBkYXRhLWR1cmF0aW9uPSIyIiBkYXRhLWZwcz0iMzAiPgogICAgICAgIDxkaXYKICAgICAgICAgIGlkPSJrY2ItY2xpcCIKICAgICAgICAgIGNsYXNzPSJrY2ItY2xpcCBjbGlwIgogICAgICAgICAgZGF0YS1zdGFydD0iMCIKICAgICAgICAgIGRhdGEtZHVyYXRpb249IjIiCiAgICAgICAgICBkYXRhLXRyYWNrLWluZGV4PSIwIgogICAgICAgID4KICAgICAgICAgIDxkaXYgaWQ9ImtjYi1zdGFnZSIgY2xhc3M9ImtjYi1zdGFnZSIgcm9sZT0iaW1nIj48L2Rpdj4KICAgICAgICA8L2Rpdj4KCiAgICAgICAgPHNjcmlwdCBzcmM9Imh0dHBzOi8vY2RuLmpzZGVsaXZyLm5ldC9ucG0vZ3NhcEAzLjE0LjIvZGlzdC9nc2FwLm1pbi5qcyI+PC9zY3JpcHQ+CiAgICAgICAgPHNjcmlwdCBzcmM9Imh0dHBzOi8vY2RuLmpzZGVsaXZyLm5ldC9ucG0vZ3NhcEAzLjE0LjIvZGlzdC9DdXN0b21FYXNlLm1pbi5qcyI+PC9zY3JpcHQ+CiAgICAgICAgPHNjcmlwdD4KICAgICAgICAgIChmdW5jdGlvbiAoKSB7CiAgICAgICAgICAgICJ1c2Ugc3RyaWN0IjsKCiAgICAgICAgICAgIHZhciByb290ID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoInJvb3QiKTsKICAgICAgICAgICAgdmFyIHN0YWdlID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoImtjYi1zdGFnZSIpOwogICAgICAgICAgICB2YXIgdmFycyA9CiAgICAgICAgICAgICAgd2luZG93Ll9faHlwZXJmcmFtZXMgJiYgd2luZG93Ll9faHlwZXJmcmFtZXMuZ2V0VmFyaWFibGVzCiAgICAgICAgICAgICAgICA/IHdpbmRvdy5fX2h5cGVyZnJhbWVzLmdldFZhcmlhYmxlcygpCiAgICAgICAgICAgICAgICA6IHt9OwoKICAgICAgICAgICAgZnVuY3Rpb24gbnVtYmVyQmV0d2Vlbih2YWx1ZSwgZmFsbGJhY2ssIG1pbiwgbWF4KSB7CiAgICAgICAgICAgICAgdmFyIHBhcnNlZCA9IE51bWJlcih2YWx1ZSk7CiAgICAgICAgICAgICAgaWYgKCFOdW1iZXIuaXNGaW5pdGUocGFyc2VkKSkgcmV0dXJuIGZhbGxiYWNrOwogICAgICAgICAgICAgIHJldHVybiBNYXRoLm1pbihtYXgsIE1hdGgubWF4KG1pbiwgcGFyc2VkKSk7CiAgICAgICAgICAgIH0KCiAgICAgICAgICAgIHZhciB0ZXh0ID0gdHlwZW9mIHZhcnMudGV4dCA9PT0gInN0cmluZyIgPyB2YXJzLnRleHQudHJpbSgpIDogIiI7CiAgICAgICAgICAgIGlmICghdGV4dCkgdGV4dCA9ICJXb3JkcyBwdXNoIGxlZnQuIjsKCiAgICAgICAgICAgIHZhciB3b3JkcyA9IHRleHQuc3BsaXQoL1xzKy8pOwogICAgICAgICAgICB2YXIgcmVxdWVzdGVkRm9udFNpemUgPSBudW1iZXJCZXR3ZWVuKHZhcnMuZm9udF9zaXplLCA3MiwgMzYsIDE2MCk7CiAgICAgICAgICAgIHZhciBlbnRyeU9mZnNldCA9IG51bWJlckJldHdlZW4odmFycy5lbnRyeV9vZmZzZXQsIDg4LCAyMCwgMTYwKTsKICAgICAgICAgICAgdmFyIGZvbnRXZWlnaHQgPQogICAgICAgICAgICAgIHZhcnMuZm9udF93ZWlnaHQgPT09ICI1MDAiIHx8IHZhcnMuZm9udF93ZWlnaHQgPT09ICI3MDAiIHx8IHZhcnMuZm9udF93ZWlnaHQgPT09ICI4MDAiCiAgICAgICAgICAgICAgICA/IHZhcnMuZm9udF93ZWlnaHQKICAgICAgICAgICAgICAgIDogIjYwMCI7CgogICAgICAgICAgICBzdGFnZS5zdHlsZS5mb250V2VpZ2h0ID0gZm9udFdlaWdodDsKICAgICAgICAgICAgc3RhZ2Uuc3R5bGUuY29sb3IgPSB0eXBlb2YgdmFycy5jb2xvciA9PT0gInN0cmluZyIgPyB2YXJzLmNvbG9yIDogIiMxNzE3MTciOwogICAgICAgICAgICBzdGFnZS5zZXRBdHRyaWJ1dGUoImFyaWEtbGFiZWwiLCB0ZXh0KTsKCiAgICAgICAgICAgIHZhciBjYW52YXMgPSBkb2N1bWVudC5jcmVhdGVFbGVtZW50KCJjYW52YXMiKTsKICAgICAgICAgICAgdmFyIGNvbnRleHQgPSBjYW52YXMuZ2V0Q29udGV4dCgiMmQiKTsKICAgICAgICAgICAgdmFyIG1lYXN1cmVGb250ID0gJy1hcHBsZS1zeXN0ZW0sIEJsaW5rTWFjU3lzdGVtRm9udCwgIlNlZ29lIFVJIiwgUm9ib3RvLCBzYW5zLXNlcmlmJzsKICAgICAgICAgICAgdmFyIGdhcFJhdGlvID0gMTAgLyA3MjsKCiAgICAgICAgICAgIGZ1bmN0aW9uIG1lYXN1cmUoZm9udFNpemUpIHsKICAgICAgICAgICAgICBpZiAoIWNvbnRleHQpIHsKICAgICAgICAgICAgICAgIHJldHVybiB3b3Jkcy5tYXAoZnVuY3Rpb24gKHdvcmQpIHsKICAgICAgICAgICAgICAgICAgcmV0dXJuIHdvcmQubGVuZ3RoICogZm9udFNpemUgKiAwLjU1OwogICAgICAgICAgICAgICAgfSk7CiAgICAgICAgICAgICAgfQogICAgICAgICAgICAgIGNvbnRleHQuZm9udCA9IGZvbnRXZWlnaHQgKyAiICIgKyBmb250U2l6ZSArICJweCAiICsgbWVhc3VyZUZvbnQ7CiAgICAgICAgICAgICAgcmV0dXJuIHdvcmRzLm1hcChmdW5jdGlvbiAod29yZCkgewogICAgICAgICAgICAgICAgcmV0dXJuIGNvbnRleHQubWVhc3VyZVRleHQod29yZCkud2lkdGg7CiAgICAgICAgICAgICAgfSk7CiAgICAgICAgICAgIH0KCiAgICAgICAgICAgIHZhciBmb250U2l6ZSA9IHJlcXVlc3RlZEZvbnRTaXplOwogICAgICAgICAgICB2YXIgd2lkdGhzID0gbWVhc3VyZShmb250U2l6ZSk7CiAgICAgICAgICAgIHZhciBnYXAgPSBmb250U2l6ZSAqIGdhcFJhdGlvOwogICAgICAgICAgICB2YXIgZnVsbFdpZHRoID0gd2lkdGhzLnJlZHVjZSgKICAgICAgICAgICAgICBmdW5jdGlvbiAodG90YWwsIHdpZHRoKSB7CiAgICAgICAgICAgICAgICByZXR1cm4gdG90YWwgKyB3aWR0aDsKICAgICAgICAgICAgICB9LAogICAgICAgICAgICAgIGdhcCAqIE1hdGgubWF4KDAsIHdvcmRzLmxlbmd0aCAtIDEpLAogICAgICAgICAgICApOwogICAgICAgICAgICB2YXIgbWF4V2lkdGggPSBNYXRoLm1heCgxLCByb290LmNsaWVudFdpZHRoICogMC45KTsKCiAgICAgICAgICAgIGlmIChmdWxsV2lkdGggPiBtYXhXaWR0aCkgewogICAgICAgICAgICAgIGZvbnRTaXplID0gTWF0aC5tYXgoMjQsIGZvbnRTaXplICogKG1heFdpZHRoIC8gZnVsbFdpZHRoKSk7CiAgICAgICAgICAgICAgd2lkdGhzID0gbWVhc3VyZShmb250U2l6ZSk7CiAgICAgICAgICAgICAgZ2FwID0gZm9udFNpemUgKiBnYXBSYXRpbzsKICAgICAgICAgICAgfQoKICAgICAgICAgICAgc3RhZ2Uuc3R5bGUuZm9udFNpemUgPSBmb250U2l6ZSArICJweCI7CgogICAgICAgICAgICB2YXIgcG9zaXRpb25zQXQgPSBbXTsKICAgICAgICAgICAgZm9yICh2YXIgY291bnQgPSAxOyBjb3VudCA8PSB3b3Jkcy5sZW5ndGg7IGNvdW50ICs9IDEpIHsKICAgICAgICAgICAgICB2YXIgdG90YWwgPSBnYXAgKiAoY291bnQgLSAxKTsKICAgICAgICAgICAgICBmb3IgKHZhciB3aWR0aEluZGV4ID0gMDsgd2lkdGhJbmRleCA8IGNvdW50OyB3aWR0aEluZGV4ICs9IDEpIHsKICAgICAgICAgICAgICAgIHRvdGFsICs9IHdpZHRoc1t3aWR0aEluZGV4XTsKICAgICAgICAgICAgICB9CgogICAgICAgICAgICAgIHZhciBjdXJzb3IgPSAtdG90YWwgLyAyOwogICAgICAgICAgICAgIHZhciBwb3NpdGlvbnMgPSBbXTsKICAgICAgICAgICAgICBmb3IgKHZhciBwb3NpdGlvbkluZGV4ID0gMDsgcG9zaXRpb25JbmRleCA8IGNvdW50OyBwb3NpdGlvbkluZGV4ICs9IDEpIHsKICAgICAgICAgICAgICAgIHBvc2l0aW9ucy5wdXNoKGN1cnNvciArIHdpZHRoc1twb3NpdGlvbkluZGV4XSAvIDIpOwogICAgICAgICAgICAgICAgY3Vyc29yICs9IHdpZHRoc1twb3NpdGlvbkluZGV4XSArIGdhcDsKICAgICAgICAgICAgICB9CiAgICAgICAgICAgICAgcG9zaXRpb25zQXQucHVzaChwb3NpdGlvbnMpOwogICAgICAgICAgICB9CgogICAgICAgICAgICB2YXIgZWxlbWVudHMgPSB3b3Jkcy5tYXAoZnVuY3Rpb24gKHdvcmQsIGluZGV4KSB7CiAgICAgICAgICAgICAgdmFyIGVsZW1lbnQgPSBkb2N1bWVudC5jcmVhdGVFbGVtZW50KCJzcGFuIik7CiAgICAgICAgICAgICAgZWxlbWVudC5pZCA9ICJrY2Itd29yZC0iICsgaW5kZXg7CiAgICAgICAgICAgICAgZWxlbWVudC5jbGFzc05hbWUgPSAia2NiLXdvcmQiOwogICAgICAgICAgICAgIGVsZW1lbnQudGV4dENvbnRlbnQgPSB3b3JkOwogICAgICAgICAgICAgIGVsZW1lbnQuc2V0QXR0cmlidXRlKCJhcmlhLWhpZGRlbiIsICJ0cnVlIik7CiAgICAgICAgICAgICAgc3RhZ2UuYXBwZW5kQ2hpbGQoZWxlbWVudCk7CiAgICAgICAgICAgICAgcmV0dXJuIGVsZW1lbnQ7CiAgICAgICAgICAgIH0pOwoKICAgICAgICAgICAgZ3NhcC5yZWdpc3RlclBsdWdpbihDdXN0b21FYXNlKTsKICAgICAgICAgICAgdmFyIGVudHJ5RWFzZSA9IEN1c3RvbUVhc2UuY3JlYXRlKCJrY2ItZW50cnktZWFzZSIsICJNMCwwIEMwLjIsMC44IDAuMiwxIDEsMSIpOwogICAgICAgICAgICB2YXIgZHVyYXRpb24gPSBNYXRoLm1heCgwLjAwMSwgcGFyc2VGbG9hdChyb290LmRhdGFzZXQuZHVyYXRpb24gfHwgIjIiKSk7CiAgICAgICAgICAgIHZhciBmaXJzdER1cmF0aW9uID0gMTAgLyAzMDsKICAgICAgICAgICAgdmFyIHB1c2hEdXJhdGlvbiA9IDEzIC8gMzA7CiAgICAgICAgICAgIHZhciBhdXRob3JlZEJ1aWxkRHVyYXRpb24gPQogICAgICAgICAgICAgIGZpcnN0RHVyYXRpb24gKyBNYXRoLm1heCgwLCB3b3Jkcy5sZW5ndGggLSAxKSAqIHB1c2hEdXJhdGlvbjsKICAgICAgICAgICAgdmFyIGF2YWlsYWJsZUJ1aWxkRHVyYXRpb24gPSBNYXRoLm1heCgwLjI1LCBkdXJhdGlvbiAtIDAuNSk7CiAgICAgICAgICAgIHZhciB0aW1pbmdTY2FsZSA9IE1hdGgubWluKDEsIGF2YWlsYWJsZUJ1aWxkRHVyYXRpb24gLyBhdXRob3JlZEJ1aWxkRHVyYXRpb24pOwogICAgICAgICAgICBmaXJzdER1cmF0aW9uICo9IHRpbWluZ1NjYWxlOwogICAgICAgICAgICBwdXNoRHVyYXRpb24gKj0gdGltaW5nU2NhbGU7CgogICAgICAgICAgICB2YXIgdGwgPSBnc2FwLnRpbWVsaW5lKHsgcGF1c2VkOiB0cnVlIH0pOwoKICAgICAgICAgICAgZWxlbWVudHMuZm9yRWFjaChmdW5jdGlvbiAoZWxlbWVudCwgaW5kZXgpIHsKICAgICAgICAgICAgICB2YXIgdGFyZ2V0WCA9IHBvc2l0aW9uc0F0W2luZGV4XVtpbmRleF07CiAgICAgICAgICAgICAgdmFyIHN0YXJ0ID0gaW5kZXggPT09IDAgPyAwIDogZmlyc3REdXJhdGlvbiArIChpbmRleCAtIDEpICogcHVzaER1cmF0aW9uOwogICAgICAgICAgICAgIHZhciBtb3ZlRHVyYXRpb24gPSBpbmRleCA9PT0gMCA/IGZpcnN0RHVyYXRpb24gOiBwdXNoRHVyYXRpb247CiAgICAgICAgICAgICAgdmFyIGZyb21YID0gaW5kZXggPT09IDAgPyB0YXJnZXRYIDogdGFyZ2V0WCArIGVudHJ5T2Zmc2V0OwogICAgICAgICAgICAgIHZhciBmcm9tWSA9IGluZGV4ID09PSAwID8gNiA6IDA7CgogICAgICAgICAgICAgIHRsLmZyb21UbygKICAgICAgICAgICAgICAgIGVsZW1lbnQsCiAgICAgICAgICAgICAgICB7CiAgICAgICAgICAgICAgICAgIHg6IGZyb21YLAogICAgICAgICAgICAgICAgICB5OiBmcm9tWSwKICAgICAgICAgICAgICAgICAgeFBlcmNlbnQ6IC01MCwKICAgICAgICAgICAgICAgICAgeVBlcmNlbnQ6IC01MCwKICAgICAgICAgICAgICAgICAgc2NhbGU6IDAuOTkyLAogICAgICAgICAgICAgICAgICBvcGFjaXR5OiAwLAogICAgICAgICAgICAgICAgICAiLS1rY2ItYmx1ciI6ICIzLjVweCIsCiAgICAgICAgICAgICAgICB9LAogICAgICAgICAgICAgICAgewogICAgICAgICAgICAgICAgICB4OiB0YXJnZXRYLAogICAgICAgICAgICAgICAgICB5OiAwLAogICAgICAgICAgICAgICAgICB4UGVyY2VudDogLTUwLAogICAgICAgICAgICAgICAgICB5UGVyY2VudDogLTUwLAogICAgICAgICAgICAgICAgICBzY2FsZTogMSwKICAgICAgICAgICAgICAgICAgb3BhY2l0eTogMSwKICAgICAgICAgICAgICAgICAgIi0ta2NiLWJsdXIiOiAiMHB4IiwKICAgICAgICAgICAgICAgICAgZHVyYXRpb246IG1vdmVEdXJhdGlvbiwKICAgICAgICAgICAgICAgICAgZWFzZTogZW50cnlFYXNlLAogICAgICAgICAgICAgICAgICBpbW1lZGlhdGVSZW5kZXI6IGluZGV4ID09PSAwLAogICAgICAgICAgICAgICAgfSwKICAgICAgICAgICAgICAgIHN0YXJ0LAogICAgICAgICAgICAgICk7CgogICAgICAgICAgICAgIGlmIChpbmRleCA9PT0gMCkgcmV0dXJuOwoKICAgICAgICAgICAgICBmb3IgKHZhciBwcmlvckluZGV4ID0gMDsgcHJpb3JJbmRleCA8IGluZGV4OyBwcmlvckluZGV4ICs9IDEpIHsKICAgICAgICAgICAgICAgIHZhciBwcmlvckVsZW1lbnQgPSBlbGVtZW50c1twcmlvckluZGV4XTsKICAgICAgICAgICAgICAgIHZhciBuZXh0WCA9IHBvc2l0aW9uc0F0W2luZGV4XVtwcmlvckluZGV4XTsKICAgICAgICAgICAgICAgIHZhciBibHVyUGVhayA9IHN0YXJ0ICsgbW92ZUR1cmF0aW9uIC8gMjsKCiAgICAgICAgICAgICAgICB0bC50byhwcmlvckVsZW1lbnQsIHsgeDogbmV4dFgsIGR1cmF0aW9uOiBtb3ZlRHVyYXRpb24sIGVhc2U6IGVudHJ5RWFzZSB9LCBzdGFydCk7CiAgICAgICAgICAgICAgICB0bC50bygKICAgICAgICAgICAgICAgICAgcHJpb3JFbGVtZW50LAogICAgICAgICAgICAgICAgICB7ICItLWtjYi1ibHVyIjogIjAuOHB4IiwgZHVyYXRpb246IG1vdmVEdXJhdGlvbiAvIDIsIGVhc2U6ICJub25lIiB9LAogICAgICAgICAgICAgICAgICBzdGFydCwKICAgICAgICAgICAgICAgICk7CiAgICAgICAgICAgICAgICB0bC50bygKICAgICAgICAgICAgICAgICAgcHJpb3JFbGVtZW50LAogICAgICAgICAgICAgICAgICB7ICItLWtjYi1ibHVyIjogIjBweCIsIGR1cmF0aW9uOiBtb3ZlRHVyYXRpb24gLyAyLCBlYXNlOiAibm9uZSIgfSwKICAgICAgICAgICAgICAgICAgYmx1clBlYWssCiAgICAgICAgICAgICAgICApOwogICAgICAgICAgICAgIH0KICAgICAgICAgICAgfSk7CgogICAgICAgICAgICB0bC5zZWVrKDApOwogICAgICAgICAgICB3aW5kb3cuX190aW1lbGluZXMgPSB3aW5kb3cuX190aW1lbGluZXMgfHwge307CiAgICAgICAgICAgIHdpbmRvdy5fX3RpbWVsaW5lc1sia2luZXRpYy1jZW50ZXItYnVpbGQiXSA9IHRsOwogICAgICAgICAgfSkoKTsKICAgICAgICA8L3NjcmlwdD4KICAgICAgPC9kaXY+CiAgICA8L3RlbXBsYXRlPgogIDwvYm9keT4KPC9odG1sPgo=\"\n        data-start=\"0\"\n        data-duration=\"2\"\n        data-track-index=\"1\"\n        data-width=\"1280\"\n        data-height=\"720\"\n      ></div>\n    </div>\n\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <script>\n      window.__timelines = window.__timelines || {};\n      window.__timelines[\"kinetic-center-build-demo\"] = gsap.timeline({ paused: true });\n    </script>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/registry/components/kinetic-center-build/demo.html b/registry/components/kinetic-center-build/demo.html
new file mode 100644
index 0000000000..9cd36d3d2d
--- /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 0000000000..000eab1326
--- /dev/null
+++ b/registry/components/kinetic-center-build/kinetic-center-build.html
@@ -0,0 +1,286 @@
+<!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@600&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 {
+          color: var(--color, #171717);
+          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.style.color = typeof vars.color === "string" ? vars.color : "#171717";
+            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 0000000000..89a04fc572
--- /dev/null
+++ b/registry/components/kinetic-center-build/registry-item.json
@@ -0,0 +1,78 @@
+{
+  "$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 }],
+  "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 ae2fb69d61..73115b58f3 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"
