heygen-com · vanceingalls · Jun 7, 2026 · Jun 6, 2026 · Jun 6, 2026 · Jun 6, 2026
diff --git a/docs/catalog/components/morph-text.mdx 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>