From 03fe6a88a3c06057c09d6f473c838cf077bdea3d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Miguel=20=C3=81ngel?= Date: Sat, 6 Jun 2026 17:27:08 -0400 Subject: [PATCH 1/7] 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 --- .../components/morph-text/morph-text.html | 216 ++++++++++++++++++ .../components/morph-text/registry-item.json | 15 ++ registry/registry.json | 4 + 3 files changed, 235 insertions(+) create mode 100644 registry/components/morph-text/morph-text.html create mode 100644 registry/components/morph-text/registry-item.json diff --git a/registry/components/morph-text/morph-text.html b/registry/components/morph-text/morph-text.html new file mode 100644 index 0000000000..28c9ceb07d --- /dev/null +++ b/registry/components/morph-text/morph-text.html @@ -0,0 +1,216 @@ + + + + + + Morph Text + + + + + + + +
+ + + + + +
+
+ + +
+
+
+ + + + diff --git a/registry/components/morph-text/registry-item.json b/registry/components/morph-text/registry-item.json new file mode 100644 index 0000000000..e2788301df --- /dev/null +++ b/registry/components/morph-text/registry-item.json @@ -0,0 +1,15 @@ +{ + "$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", "typography", "morph", "gooey", "kinetic", "animation"], + "files": [ + { + "path": "morph-text.html", + "target": "compositions/components/morph-text.html", + "type": "hyperframes:snippet" + } + ] +} diff --git a/registry/registry.json b/registry/registry.json index 5e6ad4b93f..baed2b259e 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" From b9ba91312d3c73c492353e4bd2209be2508e490a Mon Sep 17 00:00:00 2001 From: Vance Ingalls Date: Sat, 6 Jun 2026 15:03:52 -0700 Subject: [PATCH 2/7] 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 --- packages/core/src/registry/types.ts | 5 ++++- packages/studio/src/hooks/useBlockCatalog.ts | 7 ++++--- packages/studio/src/utils/blockCategories.ts | 1 + .../components/caption-blend-difference/registry-item.json | 2 +- registry/components/morph-text/registry-item.json | 2 +- registry/components/texture-mask-text/registry-item.json | 2 +- 6 files changed, 12 insertions(+), 7 deletions(-) diff --git a/packages/core/src/registry/types.ts b/packages/core/src/registry/types.ts index 32ded043f9..cd7ae29c68 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 83ea930ed3..b76a31a2b8 100644 --- a/packages/studio/src/hooks/useBlockCatalog.ts +++ b/packages/studio/src/hooks/useBlockCatalog.ts @@ -20,9 +20,10 @@ export function useBlockCatalog() { vfx: 1, transitions: 2, effects: 3, - social: 4, - data: 5, - scenes: 6, + "text-effects": 4, + social: 5, + data: 6, + scenes: 7, }; let cancelled = false; diff --git a/packages/studio/src/utils/blockCategories.ts b/packages/studio/src/utils/blockCategories.ts index c43b142d89..6358ed6482 100644 --- a/packages/studio/src/utils/blockCategories.ts +++ b/packages/studio/src/utils/blockCategories.ts @@ -16,6 +16,7 @@ const COLOR_MAP: Record Date: Sat, 6 Jun 2026 15:07:11 -0700 Subject: [PATCH 3/7] chore(registry): add morph-text preview video Co-Authored-By: Claude Sonnet 4.6 --- registry/components/morph-text/registry-item.json | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/registry/components/morph-text/registry-item.json b/registry/components/morph-text/registry-item.json index d0f1e4ae99..1e2b641760 100644 --- a/registry/components/morph-text/registry-item.json +++ b/registry/components/morph-text/registry-item.json @@ -11,5 +11,8 @@ "target": "compositions/components/morph-text.html", "type": "hyperframes:snippet" } - ] + ], + "preview": { + "video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/morph-text.mp4" + } } From 16996e19f63df66d7e23db6f6dc91a602fe2f4a9 Mon Sep 17 00:00:00 2001 From: Vance Ingalls Date: Sat, 6 Jun 2026 15:10:56 -0700 Subject: [PATCH 4/7] chore(registry): fix morph-text.html formatting Co-Authored-By: Claude Sonnet 4.6 --- .../components/morph-text/morph-text.html | 25 +++++++++++++------ 1 file changed, 17 insertions(+), 8 deletions(-) diff --git a/registry/components/morph-text/morph-text.html b/registry/components/morph-text/morph-text.html index 28c9ceb07d..5d18db19c1 100644 --- a/registry/components/morph-text/morph-text.html +++ b/registry/components/morph-text/morph-text.html @@ -56,7 +56,8 @@ 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)); + 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 { @@ -144,12 +145,14 @@ color: el.dataset.color || "#111111", }; }) - .filter(function (w) { return w.text; }); + .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" }, + { text: "Text", font: "'Figtree', sans-serif", color: "#111111" }, ]; } @@ -178,12 +181,16 @@ if (frac <= 0) { display.style.filter = "none"; - elA.style.filter = ""; elA.style.opacity = "1"; - elB.style.filter = ""; elB.style.opacity = "0"; + 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"; + elA.style.filter = ""; + elA.style.opacity = "0"; + elB.style.filter = ""; + elB.style.opacity = "1"; } else { display.style.filter = "url(#morph-threshold)"; var blurB = Math.min(8 / frac - 8, 100); @@ -202,7 +209,9 @@ t: duration, duration: duration, ease: "none", - onUpdate: function () { applyMorph(proxy.t); } + onUpdate: function () { + applyMorph(proxy.t); + }, }); applyMorph(0); From e1b1c8aef3acf25f4ecae688668c4fc510122e88 Mon Sep 17 00:00:00 2001 From: Vance Ingalls Date: Sat, 6 Jun 2026 15:12:35 -0700 Subject: [PATCH 5/7] 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 --- docs/catalog/components/morph-text.mdx | 40 ++++++++++++++++++++++++++ docs/docs.json | 10 +++++-- 2 files changed, 48 insertions(+), 2 deletions(-) create mode 100644 docs/catalog/components/morph-text.mdx diff --git a/docs/catalog/components/morph-text.mdx b/docs/catalog/components/morph-text.mdx new file mode 100644 index 0000000000..660a3bb89d --- /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` + +