mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-03 04:38:33 +00:00
feat(registry): add morph-text component and text-effects catalog section (#1247)
* 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>
This commit is contained in:
Vance Ingalls
co-authored by
Claude Sonnet 4.6
Miguel Ángel
Claude Sonnet 4.6
Miguel Ángel
parent
a890d093e1
commit
48fcf4ada5
@@ -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.
|
||||
+8
-2
@@ -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": [
|
||||
|
||||
@@ -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";
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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) {
|
||||
|
||||
@@ -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",
|
||||
|
||||
+237
@@ -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>
|
||||
+234
@@ -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>
|
||||
@@ -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"
|
||||
}
|
||||
}
|
||||
@@ -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",
|
||||
|
||||
@@ -155,6 +155,10 @@
|
||||
"name": "caption-blend-difference",
|
||||
"type": "hyperframes:component"
|
||||
},
|
||||
{
|
||||
"name": "morph-text",
|
||||
"type": "hyperframes:component"
|
||||
},
|
||||
{
|
||||
"name": "instagram-follow",
|
||||
"type": "hyperframes:block"
|
||||
|
||||
Reference in New Issue
Block a user