minSize) {
- _fitCtx.font = fontWeight + " " + size + "px " + fontFamily;
- if (_fitCtx.measureText(text).width <= maxWidth) return size;
- size -= 2;
- }
- return minSize;
- }
-
- function mulberry32(seed) {
- return function () {
- seed |= 0;
- seed = (seed + 0x6d2b79f5) | 0;
- var t = Math.imul(seed ^ (seed >>> 15), 1 | seed);
- t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
- return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
- };
- }
-
- var WORDS = [
+ var TRANSCRIPT = [
{ text: "Every", start: 0.0, end: 0.3 },
{ text: "great", start: 0.3, end: 0.55 },
{ text: "video", start: 0.55, end: 0.85 },
@@ -175,27 +159,69 @@
{ text: "cinema.", start: 7.3, end: 7.7 },
];
- // Keywords get white + glow on activation
- var KEYWORDS = new Set([8, 12, 15, 24, 27]); // HyperFrames, HTML, professional, code, cinema.
+ var _fitCanvas = document.createElement("canvas");
+ var _fitCtx = _fitCanvas.getContext("2d");
+ function fitFontSize(text, baseFontSize, fontWeight, fontFamily, maxWidth) {
+ var size = baseFontSize;
+ var minSize = Math.floor(baseFontSize * 0.45);
+ while (size > minSize) {
+ _fitCtx.font = fontWeight + " " + size + "px " + fontFamily;
+ if (_fitCtx.measureText(text).width <= maxWidth) return size;
+ size -= 2;
+ }
+ return minSize;
+ }
- var RAW_GROUPS = [
- [0, 3],
- [4, 7],
- [8, 8],
- [9, 12],
- [13, 15],
- [16, 16],
- [17, 19],
- [20, 22],
- [23, 24],
- [25, 27],
- ];
+ function mulberry32(seed) {
+ return function () {
+ seed |= 0;
+ seed = (seed + 0x6d2b79f5) | 0;
+ var t = Math.imul(seed ^ (seed >>> 15), 1 | seed);
+ t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
+ return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+ };
+ }
+
+ function buildGroups(words) {
+ var groups = [];
+ var start = 0;
+ var chars = 0;
+ for (var i = 0; i < words.length; i++) {
+ chars += words[i].text.length + 1;
+ var endsSentence = /[.!?]$/.test(words[i].text);
+ var nextGap = i + 1 < words.length ? words[i + 1].start - words[i].end : 0;
+ var full = i - start >= 3 || chars >= 21;
+ if (endsSentence || nextGap > 0.28 || full || i === words.length - 1) {
+ groups.push([start, i]);
+ start = i + 1;
+ chars = 0;
+ }
+ }
+ return groups;
+ }
+
+ function glitchPlan(word, nextWord) {
+ var nextStart = nextWord ? nextWord.start : word.end + 0.3;
+ var available = Math.min(word.end, nextStart) - word.start - 0.02;
+ var total = Math.min(0.24, Math.max(0.08, available));
+ return {
+ d1: total * 0.35,
+ d2: total * 0.65,
+ };
+ }
+
+ function shouldAftershock(word) {
+ return /\d|\$|%/.test(word.text) || word.text.replace(/[^\w]/g, "").length >= 7;
+ }
+
+ var RAW_GROUPS = buildGroups(TRANSCRIPT);
var GROUPS = RAW_GROUPS.map(function (pair, gi) {
- var ws = pair[0],
- we = pair[1];
- var nextStart = gi + 1 < RAW_GROUPS.length ? WORDS[RAW_GROUPS[gi + 1][0]].start : 8.0;
- var gEnd = Math.min(WORDS[we].end + 0.35, nextStart - 0.05);
- return { wordStart: ws, wordEnd: we, start: WORDS[ws].start, end: gEnd };
+ var ws = pair[0];
+ var we = pair[1];
+ var nextStart =
+ gi + 1 < RAW_GROUPS.length ? TRANSCRIPT[RAW_GROUPS[gi + 1][0]].start : 8.0;
+ var end = Math.min(TRANSCRIPT[we].end + 0.24, nextStart - 0.04);
+ return { wordStart: ws, wordEnd: we, start: TRANSCRIPT[ws].start, end: end };
});
var BASE_FONT = 88;
@@ -203,7 +229,7 @@
var tl = gsap.timeline({ paused: true });
GROUPS.forEach(function (g, gi) {
- var groupWords = WORDS.slice(g.wordStart, g.wordEnd + 1);
+ var groupWords = TRANSCRIPT.slice(g.wordStart, g.wordEnd + 1);
var grp = document.createElement("div");
grp.className = "gl-group";
grp.id = "gl-grp-" + gi;
@@ -230,77 +256,83 @@
tl.set(grp, { visibility: "visible" }, g.start);
tl.fromTo(
grp,
- { opacity: 0, x: -8 },
- { opacity: 1, x: 0, duration: 0.18, ease: "power3.out" },
+ { opacity: 0 },
+ { opacity: 1, duration: 0.12, ease: "power2.out" },
g.start,
);
groupWords.forEach(function (w, i) {
var wi = g.wordStart + i;
var wordEl = document.getElementById("gl-w-" + wi);
- var isKW = KEYWORDS.has(wi);
+ var plan = glitchPlan(w, TRANSCRIPT[wi + 1]);
+
var rng = mulberry32(wi * 777 + 13);
- var j1 = (rng() - 0.5) * 10;
- var j2 = (rng() - 0.5) * 8;
- var j3 = (rng() - 0.5) * 6;
- var shadowMag = 3 + rng() * 4;
+ var travel = -(8 + rng() * 8);
+ var shadowMag = 5 + rng() * 7;
var sm = shadowMag.toFixed(1);
+ var nextWord = TRANSCRIPT[wi + 1];
+ var nextStart = nextWord ? nextWord.start : g.end;
+ var aftershockEnd = Math.min(g.end - 0.08, nextStart - 0.04);
tl.to(
wordEl,
{
- x: j1,
- color: "#ffffff",
- textShadow: sm + "px 0 #ff003c, -" + sm + "px 0 #00e5ff",
- duration: 0.045,
+ x: travel,
+ textShadow:
+ sm + "px 0 #ff003c, -" + sm + "px 0 #00e5ff, 0 5px 18px rgba(0,0,0,0.52)",
+ duration: plan.d1,
ease: "none",
},
w.start,
);
- tl.to(
- wordEl,
- {
- x: j2,
- textShadow:
- "-" +
- (shadowMag * 0.7).toFixed(1) +
- "px 0 #ff003c, " +
- (shadowMag * 0.7).toFixed(1) +
- "px 0 #00e5ff",
- duration: 0.038,
- ease: "none",
- },
- w.start + 0.045,
- );
- tl.to(
- wordEl,
- {
- x: j3,
- textShadow: sm + "px 0 #ff003c, -" + sm + "px 0 #00e5ff",
- duration: 0.03,
- ease: "none",
- },
- w.start + 0.083,
- );
tl.to(
wordEl,
{
x: 0,
- textShadow: "none",
- color: isKW ? "#ffffff" : "#00e5ff",
- duration: 0.05,
- ease: "power2.out",
+ textShadow: "0 5px 18px rgba(0,0,0,0.52)",
+ duration: plan.d2,
+ ease: "power3.out",
},
- w.start + 0.113,
- );
- tl.to(
- wordEl,
- { color: "rgba(180,230,255,0.4)", textShadow: "none", duration: 0.12 },
- w.end,
+ w.start + plan.d1,
);
+
+ if (shouldAftershock(w) && aftershockEnd - w.end > 0.22) {
+ var pulseStart = w.end + 0.08;
+ var pulseIndex = 0;
+ while (pulseStart + 0.1 < aftershockEnd) {
+ var pulseTravel = -(3 + rng() * 5);
+ var pulseShadow = (3 + rng() * 5).toFixed(1);
+ tl.to(
+ wordEl,
+ {
+ x: pulseTravel,
+ textShadow:
+ pulseShadow +
+ "px 0 #ff003c, -" +
+ pulseShadow +
+ "px 0 #00e5ff, 0 5px 18px rgba(0,0,0,0.52)",
+ duration: 0.045,
+ ease: "none",
+ },
+ pulseStart,
+ );
+ tl.to(
+ wordEl,
+ {
+ x: 0,
+ textShadow: "0 5px 18px rgba(0,0,0,0.52)",
+ duration: 0.075,
+ ease: "power3.out",
+ },
+ pulseStart + 0.045,
+ );
+ pulseIndex++;
+ pulseStart += pulseIndex % 2 === 0 ? 0.18 : 0.24;
+ }
+ }
});
- tl.to(grp, { opacity: 0, x: 8, duration: 0.15 }, g.end - 0.15);
+ tl.to(grp, { opacity: 0, duration: 0.1, ease: "power2.in" }, g.end - 0.1);
tl.set(grp, { opacity: 0, visibility: "hidden" }, g.end);
});
diff --git a/registry/components/caption-glitch-rgb/demo.html b/registry/components/caption-glitch-rgb/demo.html
index 4b3c120d3..0cff82ec3 100644
--- a/registry/components/caption-glitch-rgb/demo.html
+++ b/registry/components/caption-glitch-rgb/demo.html
@@ -25,7 +25,7 @@
overflow: hidden;
background: #0a0a0a;
}
- #glitch-rgb {
+ #caption-glitch-rgb {
position: relative;
width: 1920px;
height: 1080px;
@@ -43,8 +43,13 @@
.gl-overlay {
position: absolute;
inset: 0;
- background: rgba(0, 0, 0, 0.45);
z-index: 1;
+ background: linear-gradient(
+ to bottom,
+ rgba(0, 0, 0, 0.08) 0%,
+ rgba(0, 0, 0, 0.16) 54%,
+ rgba(0, 0, 0, 0.5) 100%
+ );
pointer-events: none;
}
.gl-scanlines {
@@ -56,9 +61,10 @@
to bottom,
transparent 0px,
transparent 3px,
- rgba(0, 0, 0, 0.08) 3px,
- rgba(0, 0, 0, 0.08) 4px
+ rgba(0, 0, 0, 0.16) 3px,
+ rgba(0, 0, 0, 0.16) 4px
);
+ opacity: 0.55;
}
#gl-container {
position: absolute;
@@ -75,7 +81,7 @@
flex-wrap: wrap;
align-items: flex-end;
justify-content: center;
- gap: 24px;
+ gap: 14px;
padding: 0 100px;
opacity: 0;
visibility: hidden;
@@ -85,17 +91,18 @@
font-weight: 700;
font-size: 88px;
text-transform: uppercase;
- color: rgba(180, 230, 255, 0.45);
+ color: #ffffff;
display: inline-block;
- letter-spacing: 0.05em;
- line-height: 1;
- will-change: transform, text-shadow, color;
+ letter-spacing: 0.03em;
+ line-height: 0.96;
+ text-shadow: 0 5px 18px rgba(0, 0, 0, 0.52);
+ will-change: transform, text-shadow;
}
minSize) {
- _fitCtx.font = fontWeight + " " + size + "px " + fontFamily;
- if (_fitCtx.measureText(text).width <= maxWidth) return size;
- size -= 2;
- }
- return minSize;
- }
-
- function mulberry32(seed) {
- return function () {
- seed |= 0;
- seed = (seed + 0x6d2b79f5) | 0;
- var t = Math.imul(seed ^ (seed >>> 15), 1 | seed);
- t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
- return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
- };
- }
-
- var WORDS = [
+ var TRANSCRIPT = [
{ text: "Every", start: 0.0, end: 0.3 },
{ text: "great", start: 0.3, end: 0.55 },
{ text: "video", start: 0.55, end: 0.85 },
@@ -175,27 +159,69 @@
{ text: "cinema.", start: 7.3, end: 7.7 },
];
- // Keywords get white + glow on activation
- var KEYWORDS = new Set([8, 12, 15, 24, 27]); // HyperFrames, HTML, professional, code, cinema.
+ var _fitCanvas = document.createElement("canvas");
+ var _fitCtx = _fitCanvas.getContext("2d");
+ function fitFontSize(text, baseFontSize, fontWeight, fontFamily, maxWidth) {
+ var size = baseFontSize;
+ var minSize = Math.floor(baseFontSize * 0.45);
+ while (size > minSize) {
+ _fitCtx.font = fontWeight + " " + size + "px " + fontFamily;
+ if (_fitCtx.measureText(text).width <= maxWidth) return size;
+ size -= 2;
+ }
+ return minSize;
+ }
- var RAW_GROUPS = [
- [0, 3],
- [4, 7],
- [8, 8],
- [9, 12],
- [13, 15],
- [16, 16],
- [17, 19],
- [20, 22],
- [23, 24],
- [25, 27],
- ];
+ function mulberry32(seed) {
+ return function () {
+ seed |= 0;
+ seed = (seed + 0x6d2b79f5) | 0;
+ var t = Math.imul(seed ^ (seed >>> 15), 1 | seed);
+ t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
+ return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+ };
+ }
+
+ function buildGroups(words) {
+ var groups = [];
+ var start = 0;
+ var chars = 0;
+ for (var i = 0; i < words.length; i++) {
+ chars += words[i].text.length + 1;
+ var endsSentence = /[.!?]$/.test(words[i].text);
+ var nextGap = i + 1 < words.length ? words[i + 1].start - words[i].end : 0;
+ var full = i - start >= 3 || chars >= 21;
+ if (endsSentence || nextGap > 0.28 || full || i === words.length - 1) {
+ groups.push([start, i]);
+ start = i + 1;
+ chars = 0;
+ }
+ }
+ return groups;
+ }
+
+ function glitchPlan(word, nextWord) {
+ var nextStart = nextWord ? nextWord.start : word.end + 0.3;
+ var available = Math.min(word.end, nextStart) - word.start - 0.02;
+ var total = Math.min(0.24, Math.max(0.08, available));
+ return {
+ d1: total * 0.35,
+ d2: total * 0.65,
+ };
+ }
+
+ function shouldAftershock(word) {
+ return /\d|\$|%/.test(word.text) || word.text.replace(/[^\w]/g, "").length >= 7;
+ }
+
+ var RAW_GROUPS = buildGroups(TRANSCRIPT);
var GROUPS = RAW_GROUPS.map(function (pair, gi) {
- var ws = pair[0],
- we = pair[1];
- var nextStart = gi + 1 < RAW_GROUPS.length ? WORDS[RAW_GROUPS[gi + 1][0]].start : 8.0;
- var gEnd = Math.min(WORDS[we].end + 0.35, nextStart - 0.05);
- return { wordStart: ws, wordEnd: we, start: WORDS[ws].start, end: gEnd };
+ var ws = pair[0];
+ var we = pair[1];
+ var nextStart =
+ gi + 1 < RAW_GROUPS.length ? TRANSCRIPT[RAW_GROUPS[gi + 1][0]].start : 8.0;
+ var end = Math.min(TRANSCRIPT[we].end + 0.24, nextStart - 0.04);
+ return { wordStart: ws, wordEnd: we, start: TRANSCRIPT[ws].start, end: end };
});
var BASE_FONT = 88;
@@ -203,7 +229,7 @@
var tl = gsap.timeline({ paused: true });
GROUPS.forEach(function (g, gi) {
- var groupWords = WORDS.slice(g.wordStart, g.wordEnd + 1);
+ var groupWords = TRANSCRIPT.slice(g.wordStart, g.wordEnd + 1);
var grp = document.createElement("div");
grp.className = "gl-group";
grp.id = "gl-grp-" + gi;
@@ -230,77 +256,83 @@
tl.set(grp, { visibility: "visible" }, g.start);
tl.fromTo(
grp,
- { opacity: 0, x: -8 },
- { opacity: 1, x: 0, duration: 0.18, ease: "power3.out" },
+ { opacity: 0 },
+ { opacity: 1, duration: 0.12, ease: "power2.out" },
g.start,
);
groupWords.forEach(function (w, i) {
var wi = g.wordStart + i;
var wordEl = document.getElementById("gl-w-" + wi);
- var isKW = KEYWORDS.has(wi);
+ var plan = glitchPlan(w, TRANSCRIPT[wi + 1]);
+
var rng = mulberry32(wi * 777 + 13);
- var j1 = (rng() - 0.5) * 10;
- var j2 = (rng() - 0.5) * 8;
- var j3 = (rng() - 0.5) * 6;
- var shadowMag = 3 + rng() * 4;
+ var travel = -(8 + rng() * 8);
+ var shadowMag = 5 + rng() * 7;
var sm = shadowMag.toFixed(1);
+ var nextWord = TRANSCRIPT[wi + 1];
+ var nextStart = nextWord ? nextWord.start : g.end;
+ var aftershockEnd = Math.min(g.end - 0.08, nextStart - 0.04);
tl.to(
wordEl,
{
- x: j1,
- color: "#ffffff",
- textShadow: sm + "px 0 #ff003c, -" + sm + "px 0 #00e5ff",
- duration: 0.045,
+ x: travel,
+ textShadow:
+ sm + "px 0 #ff003c, -" + sm + "px 0 #00e5ff, 0 5px 18px rgba(0,0,0,0.52)",
+ duration: plan.d1,
ease: "none",
},
w.start,
);
- tl.to(
- wordEl,
- {
- x: j2,
- textShadow:
- "-" +
- (shadowMag * 0.7).toFixed(1) +
- "px 0 #ff003c, " +
- (shadowMag * 0.7).toFixed(1) +
- "px 0 #00e5ff",
- duration: 0.038,
- ease: "none",
- },
- w.start + 0.045,
- );
- tl.to(
- wordEl,
- {
- x: j3,
- textShadow: sm + "px 0 #ff003c, -" + sm + "px 0 #00e5ff",
- duration: 0.03,
- ease: "none",
- },
- w.start + 0.083,
- );
tl.to(
wordEl,
{
x: 0,
- textShadow: "none",
- color: isKW ? "#ffffff" : "#00e5ff",
- duration: 0.05,
- ease: "power2.out",
+ textShadow: "0 5px 18px rgba(0,0,0,0.52)",
+ duration: plan.d2,
+ ease: "power3.out",
},
- w.start + 0.113,
- );
- tl.to(
- wordEl,
- { color: "rgba(180,230,255,0.4)", textShadow: "none", duration: 0.12 },
- w.end,
+ w.start + plan.d1,
);
+
+ if (shouldAftershock(w) && aftershockEnd - w.end > 0.22) {
+ var pulseStart = w.end + 0.08;
+ var pulseIndex = 0;
+ while (pulseStart + 0.1 < aftershockEnd) {
+ var pulseTravel = -(3 + rng() * 5);
+ var pulseShadow = (3 + rng() * 5).toFixed(1);
+ tl.to(
+ wordEl,
+ {
+ x: pulseTravel,
+ textShadow:
+ pulseShadow +
+ "px 0 #ff003c, -" +
+ pulseShadow +
+ "px 0 #00e5ff, 0 5px 18px rgba(0,0,0,0.52)",
+ duration: 0.045,
+ ease: "none",
+ },
+ pulseStart,
+ );
+ tl.to(
+ wordEl,
+ {
+ x: 0,
+ textShadow: "0 5px 18px rgba(0,0,0,0.52)",
+ duration: 0.075,
+ ease: "power3.out",
+ },
+ pulseStart + 0.045,
+ );
+ pulseIndex++;
+ pulseStart += pulseIndex % 2 === 0 ? 0.18 : 0.24;
+ }
+ }
});
- tl.to(grp, { opacity: 0, x: 8, duration: 0.15 }, g.end - 0.15);
+ tl.to(grp, { opacity: 0, duration: 0.1, ease: "power2.in" }, g.end - 0.1);
tl.set(grp, { opacity: 0, visibility: "hidden" }, g.end);
});
diff --git a/registry/components/caption-glitch-rgb/registry-item.json b/registry/components/caption-glitch-rgb/registry-item.json
index e8f356737..0c2e06fe9 100644
--- a/registry/components/caption-glitch-rgb/registry-item.json
+++ b/registry/components/caption-glitch-rgb/registry-item.json
@@ -12,5 +12,5 @@
"type": "hyperframes:snippet"
}
],
- "preview": "https://static.heygen.ai/hyperframes-oss/registry/components/caption-glitch-rgb/preview.mp4?v=1779051416"
+ "preview": "https://static.heygen.ai/hyperframes-oss/registry/components/caption-glitch-rgb/preview.mp4?v=1779065047"
}
diff --git a/registry/components/caption-gradient-fill/caption-gradient-fill.html b/registry/components/caption-gradient-fill/caption-gradient-fill.html
index eb0fa9e05..75c5d0fcf 100644
--- a/registry/components/caption-gradient-fill/caption-gradient-fill.html
+++ b/registry/components/caption-gradient-fill/caption-gradient-fill.html
@@ -233,11 +233,11 @@
groupWords.forEach(function (w, i) {
var wi = g.wordStart + i;
var el = document.getElementById("gr-w-" + wi);
- tl.to(el, { opacity: 1, scale: 1.1, duration: 0.08 }, w.start);
- tl.to(el, { opacity: 0.3, scale: 1, duration: 0.08 }, w.end);
+ tl.to(el, { opacity: 1, scale: 1.1, duration: 0.15 }, w.start);
+ tl.to(el, { opacity: 0.3, scale: 1, duration: 0.15 }, w.end);
});
- tl.to(grp, { y: -26, opacity: 0, duration: 0.18 }, g.end - 0.18);
+ tl.to(grp, { y: -26, opacity: 0, duration: 0.25 }, g.end - 0.25);
tl.set(grp, { opacity: 0, visibility: "hidden" }, g.end);
});
diff --git a/registry/components/caption-gradient-fill/demo.html b/registry/components/caption-gradient-fill/demo.html
index eb0fa9e05..75c5d0fcf 100644
--- a/registry/components/caption-gradient-fill/demo.html
+++ b/registry/components/caption-gradient-fill/demo.html
@@ -233,11 +233,11 @@
groupWords.forEach(function (w, i) {
var wi = g.wordStart + i;
var el = document.getElementById("gr-w-" + wi);
- tl.to(el, { opacity: 1, scale: 1.1, duration: 0.08 }, w.start);
- tl.to(el, { opacity: 0.3, scale: 1, duration: 0.08 }, w.end);
+ tl.to(el, { opacity: 1, scale: 1.1, duration: 0.15 }, w.start);
+ tl.to(el, { opacity: 0.3, scale: 1, duration: 0.15 }, w.end);
});
- tl.to(grp, { y: -26, opacity: 0, duration: 0.18 }, g.end - 0.18);
+ tl.to(grp, { y: -26, opacity: 0, duration: 0.25 }, g.end - 0.25);
tl.set(grp, { opacity: 0, visibility: "hidden" }, g.end);
});
diff --git a/registry/components/caption-gradient-fill/registry-item.json b/registry/components/caption-gradient-fill/registry-item.json
index f76651f1b..6e090599c 100644
--- a/registry/components/caption-gradient-fill/registry-item.json
+++ b/registry/components/caption-gradient-fill/registry-item.json
@@ -12,5 +12,5 @@
"type": "hyperframes:snippet"
}
],
- "preview": "https://static.heygen.ai/hyperframes-oss/registry/components/caption-gradient-fill/preview.mp4?v=1779051416"
+ "preview": "https://static.heygen.ai/hyperframes-oss/registry/components/caption-gradient-fill/preview.mp4?v=1779057707"
}
diff --git a/registry/components/caption-typewriter/caption-typewriter.html b/registry/components/caption-highlight/caption-highlight.html
similarity index 53%
rename from registry/components/caption-typewriter/caption-typewriter.html
rename to registry/components/caption-highlight/caption-highlight.html
index ee1e194b4..2236c8b89 100644
--- a/registry/components/caption-typewriter/caption-typewriter.html
+++ b/registry/components/caption-highlight/caption-highlight.html
@@ -3,11 +3,11 @@
-
Typewriter
+
Highlight
@@ -23,16 +23,16 @@
height: 1080px;
margin: 0;
overflow: hidden;
- background: #000;
+ background: #0a0a0a;
}
- #typewriter {
+ #highlight {
position: relative;
width: 1920px;
height: 1080px;
overflow: hidden;
- background: #000;
+ background: #0a0a0a;
}
- #tw-video {
+ #hl-video {
position: absolute;
inset: 0;
z-index: 0;
@@ -40,78 +40,77 @@
height: 100%;
object-fit: cover;
}
- .tw-overlay {
+ .hl-overlay {
position: absolute;
inset: 0;
- background: rgba(0, 0, 0, 0.85);
+ background: rgba(0, 0, 0, 0.4);
z-index: 1;
pointer-events: none;
}
- #tw-container {
+ #hl-container {
position: absolute;
inset: 0;
z-index: 10;
pointer-events: none;
}
- .tw-group {
+ .hl-group {
position: absolute;
- bottom: 120px;
+ bottom: 140px;
left: 0;
width: 100%;
display: flex;
flex-wrap: wrap;
align-items: flex-end;
justify-content: center;
- gap: 24px;
- padding: 0 80px;
+ gap: 8px;
+ padding: 0 100px;
opacity: 0;
visibility: hidden;
}
- .tw-word {
- font-family: "JetBrains Mono", monospace;
- font-weight: 700;
- font-size: 76px;
- color: #00ff41;
- text-shadow: 0 0 12px rgba(0, 255, 65, 0.5);
+ .hl-word {
+ font-family: "Montserrat", sans-serif;
+ font-weight: 800;
+ font-size: 80px;
+ text-transform: uppercase;
+ color: #ffffff;
display: inline-block;
- letter-spacing: 0.04em;
+ letter-spacing: 0.02em;
line-height: 1;
- white-space: nowrap;
+ position: relative;
+ padding: 6px 12px 8px;
+ text-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
+ transform-origin: 50% 58%;
+ will-change: transform, filter;
}
- .tw-char {
- display: none;
+ .hl-word-bg {
+ position: absolute;
+ inset: 0;
+ background: linear-gradient(135deg, #ff1745 0%, #df1238 100%);
+ border-radius: 10px;
+ box-shadow: 0 12px 30px rgba(229, 20, 58, 0.32);
+ opacity: 0;
+ transform: scaleX(0);
+ transform-origin: 0% 50%;
+ z-index: -1;
}
- .tw-cursor {
- font-family: "JetBrains Mono", monospace;
- font-weight: 700;
- font-size: 76px;
- color: #00ff41;
- text-shadow: 0 0 12px rgba(0, 255, 65, 0.5);
- display: none;
+ .hl-word-text {
+ position: relative;
+ z-index: 1;
}
diff --git a/registry/components/caption-typewriter/demo.html b/registry/components/caption-highlight/demo.html
similarity index 53%
rename from registry/components/caption-typewriter/demo.html
rename to registry/components/caption-highlight/demo.html
index ee1e194b4..2236c8b89 100644
--- a/registry/components/caption-typewriter/demo.html
+++ b/registry/components/caption-highlight/demo.html
@@ -3,11 +3,11 @@
-
Typewriter
+
Highlight
@@ -23,16 +23,16 @@
height: 1080px;
margin: 0;
overflow: hidden;
- background: #000;
+ background: #0a0a0a;
}
- #typewriter {
+ #highlight {
position: relative;
width: 1920px;
height: 1080px;
overflow: hidden;
- background: #000;
+ background: #0a0a0a;
}
- #tw-video {
+ #hl-video {
position: absolute;
inset: 0;
z-index: 0;
@@ -40,78 +40,77 @@
height: 100%;
object-fit: cover;
}
- .tw-overlay {
+ .hl-overlay {
position: absolute;
inset: 0;
- background: rgba(0, 0, 0, 0.85);
+ background: rgba(0, 0, 0, 0.4);
z-index: 1;
pointer-events: none;
}
- #tw-container {
+ #hl-container {
position: absolute;
inset: 0;
z-index: 10;
pointer-events: none;
}
- .tw-group {
+ .hl-group {
position: absolute;
- bottom: 120px;
+ bottom: 140px;
left: 0;
width: 100%;
display: flex;
flex-wrap: wrap;
align-items: flex-end;
justify-content: center;
- gap: 24px;
- padding: 0 80px;
+ gap: 8px;
+ padding: 0 100px;
opacity: 0;
visibility: hidden;
}
- .tw-word {
- font-family: "JetBrains Mono", monospace;
- font-weight: 700;
- font-size: 76px;
- color: #00ff41;
- text-shadow: 0 0 12px rgba(0, 255, 65, 0.5);
+ .hl-word {
+ font-family: "Montserrat", sans-serif;
+ font-weight: 800;
+ font-size: 80px;
+ text-transform: uppercase;
+ color: #ffffff;
display: inline-block;
- letter-spacing: 0.04em;
+ letter-spacing: 0.02em;
line-height: 1;
- white-space: nowrap;
+ position: relative;
+ padding: 6px 12px 8px;
+ text-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
+ transform-origin: 50% 58%;
+ will-change: transform, filter;
}
- .tw-char {
- display: none;
+ .hl-word-bg {
+ position: absolute;
+ inset: 0;
+ background: linear-gradient(135deg, #ff1745 0%, #df1238 100%);
+ border-radius: 10px;
+ box-shadow: 0 12px 30px rgba(229, 20, 58, 0.32);
+ opacity: 0;
+ transform: scaleX(0);
+ transform-origin: 0% 50%;
+ z-index: -1;
}
- .tw-cursor {
- font-family: "JetBrains Mono", monospace;
- font-weight: 700;
- font-size: 76px;
- color: #00ff41;
- text-shadow: 0 0 12px rgba(0, 255, 65, 0.5);
- display: none;
+ .hl-word-text {
+ position: relative;
+ z-index: 1;
}
diff --git a/registry/components/caption-highlight/registry-item.json b/registry/components/caption-highlight/registry-item.json
new file mode 100644
index 000000000..6f112c29a
--- /dev/null
+++ b/registry/components/caption-highlight/registry-item.json
@@ -0,0 +1,16 @@
+{
+ "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+ "name": "caption-highlight",
+ "type": "hyperframes:component",
+ "title": "Highlight",
+ "description": "Red background sweep behind each active word, TikTok-style",
+ "tags": ["captions", "caption-style", "highlight", "social", "tiktok"],
+ "files": [
+ {
+ "path": "caption-highlight.html",
+ "target": "compositions/components/caption-highlight.html",
+ "type": "hyperframes:snippet"
+ }
+ ],
+ "preview": "https://static.heygen.ai/hyperframes-oss/registry/components/caption-highlight/preview.mp4"
+}
diff --git a/registry/components/caption-matrix-decode/caption-matrix-decode.html b/registry/components/caption-matrix-decode/caption-matrix-decode.html
index 3d91fb7c1..11ac39f60 100644
--- a/registry/components/caption-matrix-decode/caption-matrix-decode.html
+++ b/registry/components/caption-matrix-decode/caption-matrix-decode.html
@@ -181,16 +181,16 @@
];
var GROUPS = [
- { wordStart: 0, wordEnd: 3, start: 0.0, end: 1.05 },
- { wordStart: 4, wordEnd: 7, start: 1.1, end: 2.05 },
- { wordStart: 8, wordEnd: 8, start: 2.1, end: 2.6 },
- { wordStart: 9, wordEnd: 12, start: 2.65, end: 3.5 },
- { wordStart: 13, wordEnd: 15, start: 3.55, end: 4.4 },
- { wordStart: 16, wordEnd: 16, start: 3.95, end: 4.75 },
- { wordStart: 17, wordEnd: 19, start: 4.9, end: 5.4 },
- { wordStart: 20, wordEnd: 22, start: 5.65, end: 6.2 },
- { wordStart: 23, wordEnd: 24, start: 6.35, end: 6.75 },
- { wordStart: 25, wordEnd: 27, start: 6.8, end: 7.8 },
+ { wordStart: 0, wordEnd: 3, start: 0.0, end: 1.35 },
+ { wordStart: 4, wordEnd: 7, start: 1.1, end: 2.35 },
+ { wordStart: 8, wordEnd: 8, start: 2.1, end: 2.9 },
+ { wordStart: 9, wordEnd: 12, start: 2.65, end: 3.8 },
+ { wordStart: 13, wordEnd: 15, start: 3.55, end: 4.7 },
+ { wordStart: 16, wordEnd: 16, start: 3.95, end: 5.0 },
+ { wordStart: 17, wordEnd: 19, start: 4.9, end: 5.7 },
+ { wordStart: 20, wordEnd: 22, start: 5.65, end: 6.5 },
+ { wordStart: 23, wordEnd: 24, start: 6.35, end: 7.05 },
+ { wordStart: 25, wordEnd: 27, start: 6.8, end: 7.9 },
];
var container = document.getElementById("sc-container");
@@ -248,10 +248,10 @@
var scr1El = document.getElementById("sc-scr1-" + wi);
tl.set(scr0El, { display: "inline" }, w.start);
- tl.set(scr1El, { display: "inline" }, w.start + 0.05);
- tl.set(scr0El, { display: "none" }, w.start + 0.05);
- tl.set(realEl, { display: "inline" }, w.start + 0.1);
- tl.set(scr1El, { display: "none" }, w.start + 0.1);
+ tl.set(scr1El, { display: "inline" }, w.start + 0.1);
+ tl.set(scr0El, { display: "none" }, w.start + 0.1);
+ tl.set(realEl, { display: "inline" }, w.start + 0.2);
+ tl.set(scr1El, { display: "none" }, w.start + 0.2);
});
tl.to(grp, { opacity: 0, duration: 0.12 }, g.end - 0.12);
diff --git a/registry/components/caption-matrix-decode/demo.html b/registry/components/caption-matrix-decode/demo.html
index 3d91fb7c1..11ac39f60 100644
--- a/registry/components/caption-matrix-decode/demo.html
+++ b/registry/components/caption-matrix-decode/demo.html
@@ -181,16 +181,16 @@
];
var GROUPS = [
- { wordStart: 0, wordEnd: 3, start: 0.0, end: 1.05 },
- { wordStart: 4, wordEnd: 7, start: 1.1, end: 2.05 },
- { wordStart: 8, wordEnd: 8, start: 2.1, end: 2.6 },
- { wordStart: 9, wordEnd: 12, start: 2.65, end: 3.5 },
- { wordStart: 13, wordEnd: 15, start: 3.55, end: 4.4 },
- { wordStart: 16, wordEnd: 16, start: 3.95, end: 4.75 },
- { wordStart: 17, wordEnd: 19, start: 4.9, end: 5.4 },
- { wordStart: 20, wordEnd: 22, start: 5.65, end: 6.2 },
- { wordStart: 23, wordEnd: 24, start: 6.35, end: 6.75 },
- { wordStart: 25, wordEnd: 27, start: 6.8, end: 7.8 },
+ { wordStart: 0, wordEnd: 3, start: 0.0, end: 1.35 },
+ { wordStart: 4, wordEnd: 7, start: 1.1, end: 2.35 },
+ { wordStart: 8, wordEnd: 8, start: 2.1, end: 2.9 },
+ { wordStart: 9, wordEnd: 12, start: 2.65, end: 3.8 },
+ { wordStart: 13, wordEnd: 15, start: 3.55, end: 4.7 },
+ { wordStart: 16, wordEnd: 16, start: 3.95, end: 5.0 },
+ { wordStart: 17, wordEnd: 19, start: 4.9, end: 5.7 },
+ { wordStart: 20, wordEnd: 22, start: 5.65, end: 6.5 },
+ { wordStart: 23, wordEnd: 24, start: 6.35, end: 7.05 },
+ { wordStart: 25, wordEnd: 27, start: 6.8, end: 7.9 },
];
var container = document.getElementById("sc-container");
@@ -248,10 +248,10 @@
var scr1El = document.getElementById("sc-scr1-" + wi);
tl.set(scr0El, { display: "inline" }, w.start);
- tl.set(scr1El, { display: "inline" }, w.start + 0.05);
- tl.set(scr0El, { display: "none" }, w.start + 0.05);
- tl.set(realEl, { display: "inline" }, w.start + 0.1);
- tl.set(scr1El, { display: "none" }, w.start + 0.1);
+ tl.set(scr1El, { display: "inline" }, w.start + 0.1);
+ tl.set(scr0El, { display: "none" }, w.start + 0.1);
+ tl.set(realEl, { display: "inline" }, w.start + 0.2);
+ tl.set(scr1El, { display: "none" }, w.start + 0.2);
});
tl.to(grp, { opacity: 0, duration: 0.12 }, g.end - 0.12);
diff --git a/registry/components/caption-matrix-decode/registry-item.json b/registry/components/caption-matrix-decode/registry-item.json
index a4fd0015a..b3d2cad2f 100644
--- a/registry/components/caption-matrix-decode/registry-item.json
+++ b/registry/components/caption-matrix-decode/registry-item.json
@@ -12,5 +12,5 @@
"type": "hyperframes:snippet"
}
],
- "preview": "https://static.heygen.ai/hyperframes-oss/registry/components/caption-matrix-decode/preview.mp4?v=1779051416"
+ "preview": "https://static.heygen.ai/hyperframes-oss/registry/components/caption-matrix-decode/preview.mp4?v=1779060427"
}
diff --git a/registry/components/caption-typewriter/registry-item.json b/registry/components/caption-typewriter/registry-item.json
deleted file mode 100644
index f5eac06b2..000000000
--- a/registry/components/caption-typewriter/registry-item.json
+++ /dev/null
@@ -1,16 +0,0 @@
-{
- "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
- "name": "caption-typewriter",
- "type": "hyperframes:component",
- "title": "Typewriter",
- "description": "Green terminal character-by-character reveal with blinking cursor",
- "tags": ["captions", "caption-style", "terminal", "typewriter", "hacker"],
- "files": [
- {
- "path": "caption-typewriter.html",
- "target": "compositions/components/caption-typewriter.html",
- "type": "hyperframes:snippet"
- }
- ],
- "preview": "https://static.heygen.ai/hyperframes-oss/registry/components/caption-typewriter/preview.mp4?v=1779051416"
-}
diff --git a/registry/components/caption-weight-shift/caption-weight-shift.html b/registry/components/caption-weight-shift/caption-weight-shift.html
index b02ca8e52..1eb03870d 100644
--- a/registry/components/caption-weight-shift/caption-weight-shift.html
+++ b/registry/components/caption-weight-shift/caption-weight-shift.html
@@ -59,7 +59,7 @@
left: 50%;
transform: translateX(-50%);
width: 1400px;
- height: 260px;
+ height: 278px;
display: flex;
align-items: center;
justify-content: center;
@@ -70,7 +70,7 @@
left: 0;
top: 0;
width: 1400px;
- height: 260px;
+ height: 278px;
display: flex;
align-items: center;
justify-content: center;
@@ -224,7 +224,7 @@
}
function splitLines(words) {
- if (measureLineWidth(words) <= MAX_LINE_WIDTH) {
+ if (words.length < 2) {
return [{ words: words, startIndex: 0 }];
}
var bestSplit = Math.ceil(words.length / 2);
@@ -248,6 +248,35 @@
return result;
}
+ function avoidSingleWordGroups(groups) {
+ var out = [];
+ groups.forEach(function (group) {
+ if (
+ group.words.length === 1 &&
+ out.length > 0 &&
+ out[out.length - 1].words.length < MAX_WORDS_PER_GROUP
+ ) {
+ out[out.length - 1] = makeGroup(out[out.length - 1].words.concat(group.words));
+ } else {
+ out.push(group);
+ }
+ });
+
+ for (var i = 0; i < out.length; i++) {
+ if (out[i].words.length !== 1) continue;
+ if (i + 1 < out.length && out[i + 1].words.length < MAX_WORDS_PER_GROUP) {
+ out[i] = makeGroup(out[i].words.concat(out[i + 1].words));
+ out.splice(i + 1, 1);
+ } else if (i > 0 && out[i - 1].words.length < MAX_WORDS_PER_GROUP) {
+ out[i - 1] = makeGroup(out[i - 1].words.concat(out[i].words));
+ out.splice(i, 1);
+ i--;
+ }
+ }
+
+ return out;
+ }
+
function makeGroups(words) {
var groups = [];
var current = [];
@@ -273,7 +302,7 @@
}
});
if (current.length) groups.push(makeGroup(current));
- return groups;
+ return avoidSingleWordGroups(groups);
}
function makeGroup(words) {
@@ -311,9 +340,10 @@
lineEl.id = "caption-group-" + groupIndex + "-line-" + lineIndex;
lineEl.style.fontWeight = lineIndex === 0 ? FONT_WEIGHT_BOLD : FONT_WEIGHT_LIGHT;
lineEl.style.fontSize = computedSize + "px";
- line.words.forEach(function (word) {
+ line.words.forEach(function (word, wordIndex) {
var wordEl = document.createElement("span");
wordEl.textContent = word.text.toLowerCase();
+ wordEl.style.display = "inline-block";
lineEl.appendChild(wordEl);
});
copyEl.appendChild(lineEl);
@@ -362,6 +392,7 @@
var line2El = document.getElementById("caption-group-" + groupIndex + "-line-1");
var line2FirstWord = group.lines[1].words[0];
var switchTime = line2FirstWord.start;
+
tl.to(
line1El,
{ fontWeight: FONT_WEIGHT_LIGHT, duration: WEIGHT_TRANSITION, ease: "power2.out" },
diff --git a/registry/components/caption-weight-shift/demo.html b/registry/components/caption-weight-shift/demo.html
index b02ca8e52..1eb03870d 100644
--- a/registry/components/caption-weight-shift/demo.html
+++ b/registry/components/caption-weight-shift/demo.html
@@ -59,7 +59,7 @@
left: 50%;
transform: translateX(-50%);
width: 1400px;
- height: 260px;
+ height: 278px;
display: flex;
align-items: center;
justify-content: center;
@@ -70,7 +70,7 @@
left: 0;
top: 0;
width: 1400px;
- height: 260px;
+ height: 278px;
display: flex;
align-items: center;
justify-content: center;
@@ -224,7 +224,7 @@
}
function splitLines(words) {
- if (measureLineWidth(words) <= MAX_LINE_WIDTH) {
+ if (words.length < 2) {
return [{ words: words, startIndex: 0 }];
}
var bestSplit = Math.ceil(words.length / 2);
@@ -248,6 +248,35 @@
return result;
}
+ function avoidSingleWordGroups(groups) {
+ var out = [];
+ groups.forEach(function (group) {
+ if (
+ group.words.length === 1 &&
+ out.length > 0 &&
+ out[out.length - 1].words.length < MAX_WORDS_PER_GROUP
+ ) {
+ out[out.length - 1] = makeGroup(out[out.length - 1].words.concat(group.words));
+ } else {
+ out.push(group);
+ }
+ });
+
+ for (var i = 0; i < out.length; i++) {
+ if (out[i].words.length !== 1) continue;
+ if (i + 1 < out.length && out[i + 1].words.length < MAX_WORDS_PER_GROUP) {
+ out[i] = makeGroup(out[i].words.concat(out[i + 1].words));
+ out.splice(i + 1, 1);
+ } else if (i > 0 && out[i - 1].words.length < MAX_WORDS_PER_GROUP) {
+ out[i - 1] = makeGroup(out[i - 1].words.concat(out[i].words));
+ out.splice(i, 1);
+ i--;
+ }
+ }
+
+ return out;
+ }
+
function makeGroups(words) {
var groups = [];
var current = [];
@@ -273,7 +302,7 @@
}
});
if (current.length) groups.push(makeGroup(current));
- return groups;
+ return avoidSingleWordGroups(groups);
}
function makeGroup(words) {
@@ -311,9 +340,10 @@
lineEl.id = "caption-group-" + groupIndex + "-line-" + lineIndex;
lineEl.style.fontWeight = lineIndex === 0 ? FONT_WEIGHT_BOLD : FONT_WEIGHT_LIGHT;
lineEl.style.fontSize = computedSize + "px";
- line.words.forEach(function (word) {
+ line.words.forEach(function (word, wordIndex) {
var wordEl = document.createElement("span");
wordEl.textContent = word.text.toLowerCase();
+ wordEl.style.display = "inline-block";
lineEl.appendChild(wordEl);
});
copyEl.appendChild(lineEl);
@@ -362,6 +392,7 @@
var line2El = document.getElementById("caption-group-" + groupIndex + "-line-1");
var line2FirstWord = group.lines[1].words[0];
var switchTime = line2FirstWord.start;
+
tl.to(
line1El,
{ fontWeight: FONT_WEIGHT_LIGHT, duration: WEIGHT_TRANSITION, ease: "power2.out" },
diff --git a/registry/components/caption-weight-shift/registry-item.json b/registry/components/caption-weight-shift/registry-item.json
index a5cd5924b..dd4e17c51 100644
--- a/registry/components/caption-weight-shift/registry-item.json
+++ b/registry/components/caption-weight-shift/registry-item.json
@@ -12,5 +12,5 @@
"type": "hyperframes:snippet"
}
],
- "preview": "https://static.heygen.ai/hyperframes-oss/registry/components/caption-weight-shift/preview.mp4?v=1779051416"
+ "preview": "https://static.heygen.ai/hyperframes-oss/registry/components/caption-weight-shift/preview.mp4?v=1779065047"
}
diff --git a/registry/registry.json b/registry/registry.json
index 73b93dc5a..26c8ffd02 100644
--- a/registry/registry.json
+++ b/registry/registry.json
@@ -95,10 +95,6 @@
"name": "caption-glitch-rgb",
"type": "hyperframes:component"
},
- {
- "name": "caption-typewriter",
- "type": "hyperframes:component"
- },
{
"name": "caption-matrix-decode",
"type": "hyperframes:component"
@@ -127,6 +123,10 @@
"name": "caption-neon-glow",
"type": "hyperframes:component"
},
+ {
+ "name": "caption-highlight",
+ "type": "hyperframes:component"
+ },
{
"name": "instagram-follow",
"type": "hyperframes:block"