ext/hyperframes
2
0
Fork 0
mirror of https://github.com/heygen-com/hyperframes.git synced 2026-09-01 19:42:03 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(producer): fetch missing font weights from Google Fonts at render time

Browse Source 
The deterministic font system now supplements its embedded font bundle
with Google Fonts fetches for any weights not in the pre-bundled set.
This fixes compositions that request font weights (e.g. Montserrat 300)
not included in the CANONICAL_FONTS faces array — previously those
weights were silently dropped, causing invisible text in renders.

Also replaces caption-glitch-rgb and caption-weight-shift with improved
versions from avatar preview compositions, adapted to 1920x1080 with
standard demo transcript.
This commit is contained in:
Miguel Ángel
2026-05-17 20:41:30 -04:00
parent c3c2129d17
commit c8e8fdcf6d
5 changed files with 396 additions and 269 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/producer/src/services/deterministicFonts.ts
+18 -1
View File
@@ -257,15 +257,32 @@ async function buildFontFaceCss(
const unresolved: string[] = [];
for (const [normalizedFamily, originalCaseFamily] of requestedFamilies) {
// Path 1: pre-bundled fonts via FONT_ALIASES
// Path 1: pre-bundled fonts via FONT_ALIASES — emit embedded faces,
// then fetch from Google Fonts to fill any weights not in the bundle.
const canonicalKey = FONT_ALIASES[normalizedFamily];
if (canonicalKey) {
const canonical = CANONICAL_FONTS[canonicalKey];
if (!canonical) continue;
const coveredWeights = new Set<string>();
for (const face of canonical.faces) {
const style = face.style || "normal";
const src = fontDataUri(canonical.packageName, face.weight, style);
rules.push(buildFontFaceRule(originalCaseFamily, src, face.weight, style));
coveredWeights.add(`${face.weight}:${style}`);
}
// Fetch all weights from Google Fonts and add any that aren't
// already covered by the embedded bundle. This ensures that
// compositions requesting e.g. wght@200 get that weight even
// if the bundle only ships 400/700/900.
const googleFaces = await fetchGoogleFont(originalCaseFamily, options);
for (const face of googleFaces) {
const key = `${face.weight}:${face.style}`;
if (!coveredWeights.has(key)) {
rules.push(buildFontFaceRule(originalCaseFamily, face.dataUri, face.weight, face.style));
coveredWeights.add(key);
}
}
continue;
}
registry/components/caption-glitch-rgb/caption-glitch-rgb.html
Vendored
+133 -101
View File
@@ -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.18) 3px,
rgba(0, 0, 0, 0.18) 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;
}
</style>
</head>
<body>
<div
id="glitch-rgb"
id="caption-glitch-rgb"
data-composition-id="caption-glitch-rgb"
data-start="0"
data-duration="8"
@@ -121,30 +128,7 @@
(function () {
window.__timelines = window.__timelines || {};
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;
}
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) * 24;
var j2 = (rng() - 0.5) * 18;
var j3 = (rng() - 0.5) * 14;
var shadowMag = 6 + rng() * 8;
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);
});
registry/components/caption-glitch-rgb/demo.html
Vendored
+133 -101
View File
@@ -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.18) 3px,
rgba(0, 0, 0, 0.18) 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;
}
</style>
</head>
<body>
<div
id="glitch-rgb"
id="caption-glitch-rgb"
data-composition-id="caption-glitch-rgb"
data-start="0"
data-duration="8"
@@ -121,30 +128,7 @@
(function () {
window.__timelines = window.__timelines || {};
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;
}
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) * 24;
var j2 = (rng() - 0.5) * 18;
var j3 = (rng() - 0.5) * 14;
var shadowMag = 6 + rng() * 8;
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);
});
registry/components/caption-weight-shift/caption-weight-shift.html
Vendored
+56 -33
View File
@@ -7,7 +7,7 @@
<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=Montserrat:wght@200;300;400;500;600;700;800;900&display=swap"
href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;700&display=swap"
rel="stylesheet"
/>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
@@ -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;
@@ -100,7 +100,7 @@
white-space: nowrap;
color: #ffffff;
font-family: "Montserrat", Arial, sans-serif;
font-weight: 200;
font-weight: 300;
font-size: 72px;
letter-spacing: -0.03em;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
@@ -142,10 +142,10 @@
var WORD_SPACING = 12;
var PAUSE_THRESHOLD = 0.1;
var ENTRY_DURATION = 100 / 1000;
var WEIGHT_TRANSITION = 250 / 1000;
var WEIGHT_TRANSITION = 100 / 1000;
var FONT_WIDTH_SAFETY = 1.14;
var FONT_WEIGHT_LIGHT = 200;
var FONT_WEIGHT_BOLD = 900;
var FONT_WEIGHT_LIGHT = 300;
var FONT_WEIGHT_BOLD = 700;
var TRANSCRIPT = [
{ text: "Every", start: 0.0, end: 0.3 },
@@ -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) {
@@ -309,17 +338,12 @@
var lineEl = document.createElement("div");
lineEl.className = "caption-line";
lineEl.id = "caption-group-" + groupIndex + "-line-" + lineIndex;
lineEl.style.fontWeight = FONT_WEIGHT_LIGHT;
lineEl.style.fontWeight = lineIndex === 0 ? FONT_WEIGHT_BOLD : FONT_WEIGHT_LIGHT;
lineEl.style.fontSize = computedSize + "px";
line.words.forEach(function (word, wordIndex) {
var wordEl = document.createElement("span");
wordEl.id = "cw-" + groupIndex + "-" + lineIndex + "-" + wordIndex;
wordEl.textContent = word.text.toLowerCase();
wordEl.style.fontWeight = FONT_WEIGHT_LIGHT;
wordEl.style.display = "inline-block";
wordEl.style.transition = "none";
wordEl.dataset.start = word.start;
wordEl.dataset.end = word.end;
lineEl.appendChild(wordEl);
});
copyEl.appendChild(lineEl);
@@ -363,24 +387,23 @@
visibleStart,
);
group.lines.forEach(function (line, lineIndex) {
line.words.forEach(function (word, wordIndex) {
var wEl = document.getElementById(
"cw-" + groupIndex + "-" + lineIndex + "-" + wordIndex,
);
if (!wEl) return;
tl.to(
wEl,
{ fontWeight: FONT_WEIGHT_BOLD, duration: WEIGHT_TRANSITION, ease: "power2.out" },
word.start,
);
tl.to(
wEl,
{ fontWeight: FONT_WEIGHT_LIGHT, duration: WEIGHT_TRANSITION, ease: "power2.in" },
word.end,
);
});
});
if (group.lines.length === 2) {
var line1El = document.getElementById("caption-group-" + groupIndex + "-line-0");
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" },
switchTime,
);
tl.to(
line2El,
{ fontWeight: FONT_WEIGHT_BOLD, duration: WEIGHT_TRANSITION, ease: "power2.out" },
switchTime,
);
}
tl.set(groupEl, { opacity: 0 }, visibleEnd);
});
registry/components/caption-weight-shift/demo.html
Vendored
+56 -33
View File
@@ -7,7 +7,7 @@
<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=Montserrat:wght@200;300;400;500;600;700;800;900&display=swap"
href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;700&display=swap"
rel="stylesheet"
/>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
@@ -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;
@@ -100,7 +100,7 @@
white-space: nowrap;
color: #ffffff;
font-family: "Montserrat", Arial, sans-serif;
font-weight: 200;
font-weight: 300;
font-size: 72px;
letter-spacing: -0.03em;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
@@ -142,10 +142,10 @@
var WORD_SPACING = 12;
var PAUSE_THRESHOLD = 0.1;
var ENTRY_DURATION = 100 / 1000;
var WEIGHT_TRANSITION = 250 / 1000;
var WEIGHT_TRANSITION = 100 / 1000;
var FONT_WIDTH_SAFETY = 1.14;
var FONT_WEIGHT_LIGHT = 200;
var FONT_WEIGHT_BOLD = 900;
var FONT_WEIGHT_LIGHT = 300;
var FONT_WEIGHT_BOLD = 700;
var TRANSCRIPT = [
{ text: "Every", start: 0.0, end: 0.3 },
@@ -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) {
@@ -309,17 +338,12 @@
var lineEl = document.createElement("div");
lineEl.className = "caption-line";
lineEl.id = "caption-group-" + groupIndex + "-line-" + lineIndex;
lineEl.style.fontWeight = FONT_WEIGHT_LIGHT;
lineEl.style.fontWeight = lineIndex === 0 ? FONT_WEIGHT_BOLD : FONT_WEIGHT_LIGHT;
lineEl.style.fontSize = computedSize + "px";
line.words.forEach(function (word, wordIndex) {
var wordEl = document.createElement("span");
wordEl.id = "cw-" + groupIndex + "-" + lineIndex + "-" + wordIndex;
wordEl.textContent = word.text.toLowerCase();
wordEl.style.fontWeight = FONT_WEIGHT_LIGHT;
wordEl.style.display = "inline-block";
wordEl.style.transition = "none";
wordEl.dataset.start = word.start;
wordEl.dataset.end = word.end;
lineEl.appendChild(wordEl);
});
copyEl.appendChild(lineEl);
@@ -363,24 +387,23 @@
visibleStart,
);
group.lines.forEach(function (line, lineIndex) {
line.words.forEach(function (word, wordIndex) {
var wEl = document.getElementById(
"cw-" + groupIndex + "-" + lineIndex + "-" + wordIndex,
);
if (!wEl) return;
tl.to(
wEl,
{ fontWeight: FONT_WEIGHT_BOLD, duration: WEIGHT_TRANSITION, ease: "power2.out" },
word.start,
);
tl.to(
wEl,
{ fontWeight: FONT_WEIGHT_LIGHT, duration: WEIGHT_TRANSITION, ease: "power2.in" },
word.end,
);
});
});
if (group.lines.length === 2) {
var line1El = document.getElementById("caption-group-" + groupIndex + "-line-0");
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" },
switchTime,
);
tl.to(
line2El,
{ fontWeight: FONT_WEIGHT_BOLD, duration: WEIGHT_TRANSITION, ease: "power2.out" },
switchTime,
);
}
tl.set(groupEl, { opacity: 0 }, visibleEnd);
});