From 48fcf4ada5ee67f8931a43dc54c3337fa615300c Mon Sep 17 00:00:00 2001
From: Vance Ingalls <vance@heygen.com>
Date: Sun, 7 Jun 2026 10:55:13 -0700
Subject: [PATCH] feat(registry): add morph-text component and text-effects
 catalog section (#1247)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat(gsap): add innerText support to GSAP inspector for counter animations (#1244)

Adds 'innerText' as a supported GSAP property so number roll-up animations
(count-up from 0 to some value) are visible and editable in the GSAP inspector
panel.

- Add 'innerText' to SUPPORTED_PROPS in gsapConstants.ts
- Add label 'Counter Value', tooltip, and step constraint (1) in
  gsapAnimationConstants.ts

The snap modifier that controls integer rounding is already preserved
verbatim via the EXTRAS_KEYS round-trip, so rounding behavior survives
edits without any additional UI changes.

Closes #1179

* feat(registry): add text-effects catalog section and morph-text component

Introduces a new "Text Effects" catalog section (below Effects) for text-focused visual components.

- Add `text-effects` BlockCategory to core registry types with violet color
- Add `text-effect` tag resolver in resolveBlockCategory (checked before generic `effect` tag)
- Tag caption-blend-difference, texture-mask-text, and morph-text with `text-effect`
- Update studio catalog order and color map to include text-effects
- Add morph-text component: gooey SVG threshold morph cycling through editable statements
  using GSAP seekable proxy pattern for deterministic/seekable rendering

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* chore(registry): add morph-text preview video

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* chore(registry): fix morph-text.html formatting

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* docs(catalog): add Text Effects section and morph-text page

Moves caption-blend-difference and texture-mask-text out of Effects into a new
"Text Effects" section below it. Adds morph-text component page with install
instructions and preview video.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* chore(registry): add demo.html for morph-text catalog preview rendering

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* fix(registry): address PR review feedback on morph-text and text-effects

- Restore `effect` tag on caption-blend-difference and texture-mask-text
  alongside `text-effect` so existing tag-equality searches/analytics still match
- Fix morphPause script fallback from "0.25" to "1.5" to match data attribute default
- Add Math.max(0, ...) guard to blur values (intent clarity)
- Add prefers-reduced-motion: skip morph and show first word statically
- Remove CATEGORY_ORDER record from useBlockCatalog; derive order from
  BLOCK_CATEGORIES array (single source of truth, no drift)
- Add comment to demo.html documenting its purpose (catalog preview script only)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

---------

Co-authored-by: Miguel Ángel <miguel.sierra@heygen.com>
Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 docs/catalog/components/morph-text.mdx        |  40 +++
 docs/docs.json                                |  10 +-
 packages/core/src/registry/types.ts           |   5 +-
 packages/studio/src/hooks/useBlockCatalog.ts  |  22 +-
 packages/studio/src/utils/blockCategories.ts  |   1 +
 .../registry-item.json                        |   2 +-
 registry/components/morph-text/demo.html      | 237 ++++++++++++++++++
 .../components/morph-text/morph-text.html     | 234 +++++++++++++++++
 .../components/morph-text/registry-item.json  |  18 ++
 .../texture-mask-text/registry-item.json      |   2 +-
 registry/registry.json                        |   4 +
 11 files changed, 558 insertions(+), 17 deletions(-)
 create mode 100644 docs/catalog/components/morph-text.mdx
 create mode 100644 registry/components/morph-text/demo.html
 create mode 100644 registry/components/morph-text/morph-text.html
 create mode 100644 registry/components/morph-text/registry-item.json

diff --git a/docs/catalog/components/morph-text.mdx b/docs/catalog/components/morph-text.mdx
new file mode 100644
index 000000000..660a3bb89
--- /dev/null
+++ b/docs/catalog/components/morph-text.mdx
@@ -0,0 +1,40 @@
+---
+title: "Morph Text"
+description: "Gooey text morph — cycles through an editable word list using SVG threshold + GSAP-driven blur for a fluid, satisfying transition effect"
+---
+
+# Morph Text
+
+Gooey text morph — cycles through an editable word list using SVG threshold + GSAP-driven blur for a fluid, satisfying transition effect
+
+`text` `text-effect` `typography` `morph` `gooey` `kinetic` `animation`
+
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/morph-text.mp4" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add morph-text
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Component |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `morph-text.html` | `compositions/components/morph-text.html` | hyperframes:snippet |
+
+## Usage
+
+Open `compositions/components/morph-text.html` and paste its contents into your composition.
+
+Edit the `<ol id="morph-words">` list to change the statements that cycle through. Each `<li>` accepts `data-font` (CSS font-family) and `data-color` (hex) attributes. Adjust `data-morph-speed` (seconds per transition) and `data-morph-pause` (hold time) on the root element.
diff --git a/docs/docs.json b/docs/docs.json
index 2a7c3353f..0de7e282e 100644
--- a/docs/docs.json
+++ b/docs/docs.json
@@ -223,16 +223,22 @@
           {
             "group": "Effects",
             "pages": [
-              "catalog/components/caption-blend-difference",
               "catalog/components/grain-overlay",
               "catalog/components/grid-pixelate-wipe",
               "catalog/components/parallax-unzoom",
               "catalog/components/parallax-zoom",
               "catalog/components/shimmer-sweep",
-              "catalog/components/texture-mask-text",
               "catalog/components/vignette"
             ]
           },
+          {
+            "group": "Text Effects",
+            "pages": [
+              "catalog/components/caption-blend-difference",
+              "catalog/components/morph-text",
+              "catalog/components/texture-mask-text"
+            ]
+          },
           {
             "group": "Blocks",
             "pages": [
diff --git a/packages/core/src/registry/types.ts b/packages/core/src/registry/types.ts
index 32ded043f..cd7ae29c6 100644
--- a/packages/core/src/registry/types.ts
+++ b/packages/core/src/registry/types.ts
@@ -181,7 +181,8 @@ export type BlockCategory =
   | "data"
   | "scenes"
   | "captions"
-  | "effects";
+  | "effects"
+  | "text-effects";
 
 export interface BlockCategoryMeta {
   id: BlockCategory;
@@ -194,6 +195,7 @@ export const BLOCK_CATEGORIES: BlockCategoryMeta[] = [
   { id: "vfx", label: "VFX", color: "purple" },
   { id: "transitions", label: "Transitions", color: "blue" },
   { id: "effects", label: "Effects", color: "rose" },
+  { id: "text-effects", label: "Text Effects", color: "violet" },
   { id: "social", label: "Social", color: "pink" },
   { id: "data", label: "Data", color: "green" },
   { id: "scenes", label: "Scenes", color: "amber" },
@@ -207,6 +209,7 @@ export function resolveBlockCategory(tags: string[] | undefined): BlockCategory
   if (set.has("social") || set.has("overlay")) return "social";
   if (set.has("data") || set.has("chart") || set.has("map")) return "data";
   if (set.has("html-in-canvas") || set.has("webgl") || set.has("shader")) return "vfx";
+  if (set.has("text-effect")) return "text-effects";
   if (set.has("effect") || set.has("grain") || set.has("vignette")) return "effects";
   return "scenes";
 }
diff --git a/packages/studio/src/hooks/useBlockCatalog.ts b/packages/studio/src/hooks/useBlockCatalog.ts
index 83ea930ed..74a7eadee 100644
--- a/packages/studio/src/hooks/useBlockCatalog.ts
+++ b/packages/studio/src/hooks/useBlockCatalog.ts
@@ -1,6 +1,10 @@
 import { useState, useEffect, useMemo } from "react";
 import type { RegistryItem } from "@hyperframes/core/registry";
-import { type BlockCategory, resolveBlockCategory } from "../utils/blockCategories";
+import {
+  BLOCK_CATEGORIES,
+  type BlockCategory,
+  resolveBlockCategory,
+} from "../utils/blockCategories";
 
 export type CatalogItem = RegistryItem & {
   category: BlockCategory;
@@ -15,16 +19,6 @@ export function useBlockCatalog() {
 
   // fallow-ignore-next-line complexity
   useEffect(() => {
-    const CATEGORY_ORDER: Record<BlockCategory, number> = {
-      captions: 0,
-      vfx: 1,
-      transitions: 2,
-      effects: 3,
-      social: 4,
-      data: 5,
-      scenes: 6,
-    };
-
     let cancelled = false;
     (async () => {
       try {
@@ -34,7 +28,11 @@ export function useBlockCatalog() {
         if (cancelled) return;
         const items = data
           .map((b) => ({ ...b, category: resolveBlockCategory(b.tags) }))
-          .sort((a, b) => (CATEGORY_ORDER[a.category] ?? 9) - (CATEGORY_ORDER[b.category] ?? 9));
+          .sort((a, b) => {
+            const ia = BLOCK_CATEGORIES.findIndex((c) => c.id === a.category);
+            const ib = BLOCK_CATEGORIES.findIndex((c) => c.id === b.category);
+            return (ia === -1 ? 99 : ia) - (ib === -1 ? 99 : ib);
+          });
         setBlocks(items);
       } catch (err) {
         if (cancelled) return;
diff --git a/packages/studio/src/utils/blockCategories.ts b/packages/studio/src/utils/blockCategories.ts
index c43b142d8..6358ed648 100644
--- a/packages/studio/src/utils/blockCategories.ts
+++ b/packages/studio/src/utils/blockCategories.ts
@@ -16,6 +16,7 @@ const COLOR_MAP: Record<BlockCategory, { bg: string; text: string; dot: string }
   scenes: { bg: "bg-amber-500/15", text: "text-amber-400", dot: "bg-amber-400" },
   captions: { bg: "bg-cyan-500/15", text: "text-cyan-400", dot: "bg-cyan-400" },
   effects: { bg: "bg-rose-500/15", text: "text-rose-400", dot: "bg-rose-400" },
+  "text-effects": { bg: "bg-violet-500/15", text: "text-violet-400", dot: "bg-violet-400" },
 };
 
 export function getCategoryColors(category: BlockCategory) {
diff --git a/registry/components/caption-blend-difference/registry-item.json b/registry/components/caption-blend-difference/registry-item.json
index 86622004f..009ab9192 100644
--- a/registry/components/caption-blend-difference/registry-item.json
+++ b/registry/components/caption-blend-difference/registry-item.json
@@ -4,7 +4,7 @@
   "type": "hyperframes:component",
   "title": "Blend Difference",
   "description": "Auto-inverting text using mix-blend-mode: difference — flips between white and black per-pixel against the background",
-  "tags": ["text", "effect", "blend-mode", "contrast", "inversion"],
+  "tags": ["text", "text-effect", "effect", "blend-mode", "contrast", "inversion"],
   "files": [
     {
       "path": "caption-blend-difference.html",
diff --git a/registry/components/morph-text/demo.html b/registry/components/morph-text/demo.html
new file mode 100644
index 000000000..b79043036
--- /dev/null
+++ b/registry/components/morph-text/demo.html
@@ -0,0 +1,237 @@
+<!-- demo.html — used by scripts/generate-catalog-previews.ts to render the
+     catalog preview video. Not installed by `hyperframes add morph-text`.
+     Keep in sync with morph-text.html. -->
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Morph Text</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Figtree:wght@900&display=block"
+      rel="stylesheet"
+    />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #fff;
+      }
+
+      #morph-text {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+      }
+
+      /* Word list: hidden source of truth — edit <li> items in Studio. */
+      #morph-words {
+        display: none;
+        list-style: none;
+        margin: 0;
+        padding: 0;
+      }
+
+      #morph-filter {
+        position: absolute;
+        width: 0;
+        height: 0;
+        overflow: hidden;
+        pointer-events: none;
+      }
+
+      #morph-wrapper {
+        position: absolute;
+        top: 50%;
+        left: 0;
+        transform: translateY(-50%);
+        width: 1920px;
+        height: 210px;
+        filter: drop-shadow(0 10px 44px rgba(0, 0, 0, 0.5))
+          drop-shadow(0 3px 10px rgba(0, 0, 0, 0.25));
+      }
+
+      #morph-display {
+        width: 100%;
+        height: 100%;
+        filter: none;
+      }
+
+      #morph-a,
+      #morph-b {
+        position: absolute;
+        width: 100%;
+        display: inline-block;
+        text-align: center;
+        font-size: 120pt;
+        font-weight: 900;
+        line-height: 1;
+        user-select: none;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="morph-text"
+      data-composition-id="morph-text"
+      data-timeline-locked
+      data-width="1920"
+      data-height="1080"
+      data-duration="15"
+      data-fps="30"
+      data-morph-speed="1"
+      data-morph-pause="1.5"
+    >
+      <!--
+        Edit words here — one <li> per word or phrase.
+        data-font  : CSS font-family (e.g. "'Figtree', sans-serif")
+        data-color : text color hex (e.g. "#000000")
+        Adjust data-morph-speed (seconds per morph) and data-morph-pause (hold time) above.
+      -->
+      <ol id="morph-words" aria-hidden="true">
+        <li data-font="'Figtree', sans-serif" data-color="#000000">Do more with less.</li>
+        <li data-font="'Figtree', sans-serif" data-color="#000000">Built for what's next.</li>
+        <li data-font="'Figtree', sans-serif" data-color="#000000">Fast. Focused. Powerful.</li>
+        <li data-font="'Figtree', sans-serif" data-color="#000000">Your work, amplified.</li>
+        <li data-font="'Figtree', sans-serif" data-color="#000000">Start free today.</li>
+      </ol>
+
+      <svg id="morph-filter" aria-hidden="true" focusable="false">
+        <defs>
+          <filter id="morph-threshold">
+            <feColorMatrix
+              in="SourceGraphic"
+              type="matrix"
+              values="1 0 0 0 0
+                      0 1 0 0 0
+                      0 0 1 0 0
+                      0 0 0 255 -100"
+            />
+          </filter>
+        </defs>
+      </svg>
+
+      <div id="morph-wrapper">
+        <div id="morph-display">
+          <span id="morph-a"></span>
+          <span id="morph-b"></span>
+        </div>
+      </div>
+    </div>
+
+    <script>
+      (function () {
+        "use strict";
+
+        var container = document.getElementById("morph-text");
+        var display = document.getElementById("morph-display");
+        var elA = document.getElementById("morph-a");
+        var elB = document.getElementById("morph-b");
+
+        var words = Array.from(document.querySelectorAll("#morph-words li"))
+          .map(function (el) {
+            return {
+              text: el.textContent.trim(),
+              font: el.dataset.font || "'Figtree', sans-serif",
+              color: el.dataset.color || "#111111",
+            };
+          })
+          .filter(function (w) {
+            return w.text;
+          });
+
+        if (words.length < 2) {
+          words = [
+            { text: "Morph", font: "'Figtree', sans-serif", color: "#111111" },
+            { text: "Text", font: "'Figtree', sans-serif", color: "#111111" },
+          ];
+        }
+
+        var morphSpeed = parseFloat(container.dataset.morphSpeed || "1");
+        var morphPause = parseFloat(container.dataset.morphPause || "1.5");
+        var duration = parseFloat(container.dataset.duration || "9");
+        var stepDur = morphSpeed + morphPause;
+        var totalWordDur = words.length * stepDur;
+
+        function applyMorph(T) {
+          var t = T % totalWordDur;
+          var stepIdx = Math.floor(t / stepDur);
+          var stepT = t - stepIdx * stepDur;
+          var frac = Math.min(stepT / morphSpeed, 1);
+
+          var wA = words[stepIdx % words.length];
+          var wB = words[(stepIdx + 1) % words.length];
+
+          elA.textContent = wA.text;
+          elA.style.fontFamily = wA.font;
+          elA.style.color = wA.color;
+
+          elB.textContent = wB.text;
+          elB.style.fontFamily = wB.font;
+          elB.style.color = wB.color;
+
+          if (frac <= 0) {
+            display.style.filter = "none";
+            elA.style.filter = "";
+            elA.style.opacity = "1";
+            elB.style.filter = "";
+            elB.style.opacity = "0";
+          } else if (frac >= 1) {
+            display.style.filter = "none";
+            elA.style.filter = "";
+            elA.style.opacity = "0";
+            elB.style.filter = "";
+            elB.style.opacity = "1";
+          } else {
+            display.style.filter = "url(#morph-threshold)";
+            var blurB = Math.max(0, Math.min(8 / frac - 8, 100));
+            var blurA = Math.max(0, Math.min(8 / (1 - frac) - 8, 100));
+            elB.style.filter = "blur(" + blurB + "px)";
+            elB.style.opacity = frac;
+            elA.style.filter = "blur(" + blurA + "px)";
+            elA.style.opacity = 1 - frac;
+          }
+        }
+
+        if (matchMedia("(prefers-reduced-motion: reduce)").matches) {
+          elA.textContent = words[0].text;
+          elA.style.fontFamily = words[0].font;
+          elA.style.color = words[0].color;
+          elA.style.opacity = "1";
+          display.style.filter = "none";
+          return;
+        }
+
+        var proxy = { t: 0 };
+        var tl = gsap.timeline({ paused: true });
+
+        tl.to(proxy, {
+          t: duration,
+          duration: duration,
+          ease: "none",
+          onUpdate: function () {
+            applyMorph(proxy.t);
+          },
+        });
+
+        applyMorph(0);
+        tl.seek(0);
+
+        window.__timelines = window.__timelines || {};
+        window.__timelines["morph-text"] = tl;
+      })();
+    </script>
+  </body>
+</html>
diff --git a/registry/components/morph-text/morph-text.html b/registry/components/morph-text/morph-text.html
new file mode 100644
index 000000000..1b205bafd
--- /dev/null
+++ b/registry/components/morph-text/morph-text.html
@@ -0,0 +1,234 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Morph Text</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Figtree:wght@900&display=block"
+      rel="stylesheet"
+    />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #fff;
+      }
+
+      #morph-text {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+      }
+
+      /* Word list: hidden source of truth — edit <li> items in Studio. */
+      #morph-words {
+        display: none;
+        list-style: none;
+        margin: 0;
+        padding: 0;
+      }
+
+      #morph-filter {
+        position: absolute;
+        width: 0;
+        height: 0;
+        overflow: hidden;
+        pointer-events: none;
+      }
+
+      #morph-wrapper {
+        position: absolute;
+        top: 50%;
+        left: 0;
+        transform: translateY(-50%);
+        width: 1920px;
+        height: 210px;
+        filter: drop-shadow(0 10px 44px rgba(0, 0, 0, 0.5))
+          drop-shadow(0 3px 10px rgba(0, 0, 0, 0.25));
+      }
+
+      #morph-display {
+        width: 100%;
+        height: 100%;
+        filter: none;
+      }
+
+      #morph-a,
+      #morph-b {
+        position: absolute;
+        width: 100%;
+        display: inline-block;
+        text-align: center;
+        font-size: 120pt;
+        font-weight: 900;
+        line-height: 1;
+        user-select: none;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="morph-text"
+      data-composition-id="morph-text"
+      data-timeline-locked
+      data-width="1920"
+      data-height="1080"
+      data-duration="15"
+      data-fps="30"
+      data-morph-speed="1"
+      data-morph-pause="1.5"
+    >
+      <!--
+        Edit words here — one <li> per word or phrase.
+        data-font  : CSS font-family (e.g. "'Figtree', sans-serif")
+        data-color : text color hex (e.g. "#000000")
+        Adjust data-morph-speed (seconds per morph) and data-morph-pause (hold time) above.
+      -->
+      <ol id="morph-words" aria-hidden="true">
+        <li data-font="'Figtree', sans-serif" data-color="#000000">Do more with less.</li>
+        <li data-font="'Figtree', sans-serif" data-color="#000000">Built for what's next.</li>
+        <li data-font="'Figtree', sans-serif" data-color="#000000">Fast. Focused. Powerful.</li>
+        <li data-font="'Figtree', sans-serif" data-color="#000000">Your work, amplified.</li>
+        <li data-font="'Figtree', sans-serif" data-color="#000000">Start free today.</li>
+      </ol>
+
+      <svg id="morph-filter" aria-hidden="true" focusable="false">
+        <defs>
+          <filter id="morph-threshold">
+            <feColorMatrix
+              in="SourceGraphic"
+              type="matrix"
+              values="1 0 0 0 0
+                      0 1 0 0 0
+                      0 0 1 0 0
+                      0 0 0 255 -100"
+            />
+          </filter>
+        </defs>
+      </svg>
+
+      <div id="morph-wrapper">
+        <div id="morph-display">
+          <span id="morph-a"></span>
+          <span id="morph-b"></span>
+        </div>
+      </div>
+    </div>
+
+    <script>
+      (function () {
+        "use strict";
+
+        var container = document.getElementById("morph-text");
+        var display = document.getElementById("morph-display");
+        var elA = document.getElementById("morph-a");
+        var elB = document.getElementById("morph-b");
+
+        var words = Array.from(document.querySelectorAll("#morph-words li"))
+          .map(function (el) {
+            return {
+              text: el.textContent.trim(),
+              font: el.dataset.font || "'Figtree', sans-serif",
+              color: el.dataset.color || "#111111",
+            };
+          })
+          .filter(function (w) {
+            return w.text;
+          });
+
+        if (words.length < 2) {
+          words = [
+            { text: "Morph", font: "'Figtree', sans-serif", color: "#111111" },
+            { text: "Text", font: "'Figtree', sans-serif", color: "#111111" },
+          ];
+        }
+
+        var morphSpeed = parseFloat(container.dataset.morphSpeed || "1");
+        var morphPause = parseFloat(container.dataset.morphPause || "1.5");
+        var duration = parseFloat(container.dataset.duration || "9");
+        var stepDur = morphSpeed + morphPause;
+        var totalWordDur = words.length * stepDur;
+
+        function applyMorph(T) {
+          var t = T % totalWordDur;
+          var stepIdx = Math.floor(t / stepDur);
+          var stepT = t - stepIdx * stepDur;
+          var frac = Math.min(stepT / morphSpeed, 1);
+
+          var wA = words[stepIdx % words.length];
+          var wB = words[(stepIdx + 1) % words.length];
+
+          elA.textContent = wA.text;
+          elA.style.fontFamily = wA.font;
+          elA.style.color = wA.color;
+
+          elB.textContent = wB.text;
+          elB.style.fontFamily = wB.font;
+          elB.style.color = wB.color;
+
+          if (frac <= 0) {
+            display.style.filter = "none";
+            elA.style.filter = "";
+            elA.style.opacity = "1";
+            elB.style.filter = "";
+            elB.style.opacity = "0";
+          } else if (frac >= 1) {
+            display.style.filter = "none";
+            elA.style.filter = "";
+            elA.style.opacity = "0";
+            elB.style.filter = "";
+            elB.style.opacity = "1";
+          } else {
+            display.style.filter = "url(#morph-threshold)";
+            var blurB = Math.max(0, Math.min(8 / frac - 8, 100));
+            var blurA = Math.max(0, Math.min(8 / (1 - frac) - 8, 100));
+            elB.style.filter = "blur(" + blurB + "px)";
+            elB.style.opacity = frac;
+            elA.style.filter = "blur(" + blurA + "px)";
+            elA.style.opacity = 1 - frac;
+          }
+        }
+
+        if (matchMedia("(prefers-reduced-motion: reduce)").matches) {
+          elA.textContent = words[0].text;
+          elA.style.fontFamily = words[0].font;
+          elA.style.color = words[0].color;
+          elA.style.opacity = "1";
+          display.style.filter = "none";
+          return;
+        }
+
+        var proxy = { t: 0 };
+        var tl = gsap.timeline({ paused: true });
+
+        tl.to(proxy, {
+          t: duration,
+          duration: duration,
+          ease: "none",
+          onUpdate: function () {
+            applyMorph(proxy.t);
+          },
+        });
+
+        applyMorph(0);
+        tl.seek(0);
+
+        window.__timelines = window.__timelines || {};
+        window.__timelines["morph-text"] = tl;
+      })();
+    </script>
+  </body>
+</html>
diff --git a/registry/components/morph-text/registry-item.json b/registry/components/morph-text/registry-item.json
new file mode 100644
index 000000000..1e2b64176
--- /dev/null
+++ b/registry/components/morph-text/registry-item.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "morph-text",
+  "type": "hyperframes:component",
+  "title": "Morph Text",
+  "description": "Gooey text morph — cycles through an editable word list using SVG threshold + GSAP-driven blur for a fluid, satisfying transition effect",
+  "tags": ["text", "text-effect", "typography", "morph", "gooey", "kinetic", "animation"],
+  "files": [
+    {
+      "path": "morph-text.html",
+      "target": "compositions/components/morph-text.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "preview": {
+    "video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/morph-text.mp4"
+  }
+}
diff --git a/registry/components/texture-mask-text/registry-item.json b/registry/components/texture-mask-text/registry-item.json
index 27e34957e..532a2972c 100644
--- a/registry/components/texture-mask-text/registry-item.json
+++ b/registry/components/texture-mask-text/registry-item.json
@@ -4,7 +4,7 @@
   "type": "hyperframes:component",
   "title": "Texture Mask Text",
   "description": "CSS luminance masks that cut holes through letterforms - 66 pre-built texture masks from ambientCG PBR color maps",
-  "tags": ["text", "texture", "mask", "effect"],
+  "tags": ["text", "text-effect", "effect", "texture", "mask"],
   "textureGroups": [
     {
       "title": "Masonry",
diff --git a/registry/registry.json b/registry/registry.json
index 5e6ad4b93..baed2b259 100644
--- a/registry/registry.json
+++ b/registry/registry.json
@@ -155,6 +155,10 @@
       "name": "caption-blend-difference",
       "type": "hyperframes:component"
     },
+    {
+      "name": "morph-text",
+      "type": "hyperframes:component"
+    },
     {
       "name": "instagram-follow",
       "type": "hyperframes:block"