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

docs(registry): add caption catalog pages and overflow protection

Browse Source 
- Add 15 .mdx doc pages under docs/catalog/components/ for all caption styles
- Add "Captions" group as first section in the Catalog tab navigation
- Add canvas-based fitFontSize to 14 caption components to prevent text overflow
- Fix parallax-layers vertical clipping by repositioning the behind safe zone
- Re-render all 15 preview videos at high quality and upload to CDN
This commit is contained in:
Miguel Ángel
2026-05-17 17:03:42 -04:00
parent bced3b6d7e
commit b725066fb5
59 changed files with 1093 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files
registry/components/caption-weight-shift/caption-weight-shift.html
Vendored
+16
View File
@@ -192,6 +192,19 @@
});
}
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 measureCanvas = document.createElement("canvas");
var measureContext = measureCanvas.getContext("2d");
measureContext.font = "700 " + CAPTION_FONT_SIZE + "px Montserrat";
@@ -275,6 +288,8 @@
function buildCaptions(groups) {
var stage = document.getElementById("caption-stage");
groups.forEach(function (group, groupIndex) {
var groupText = group.words.map(function (w) { return w.text.toLowerCase(); }).join(" ");
var computedSize = fitFontSize(groupText, CAPTION_FONT_SIZE, "700", "Montserrat", MAX_LINE_WIDTH);
var groupEl = document.createElement("div");
var copyEl = document.createElement("div");
groupEl.id = "caption-group-" + groupIndex;
@@ -285,6 +300,7 @@
lineEl.className = "caption-line";
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) {
var wordEl = document.createElement("span");
wordEl.textContent = word.text.toLowerCase();
registry/components/caption-weight-shift/demo.html
Vendored
+16
View File
@@ -192,6 +192,19 @@
});
}
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 measureCanvas = document.createElement("canvas");
var measureContext = measureCanvas.getContext("2d");
measureContext.font = "700 " + CAPTION_FONT_SIZE + "px Montserrat";
@@ -275,6 +288,8 @@
function buildCaptions(groups) {
var stage = document.getElementById("caption-stage");
groups.forEach(function (group, groupIndex) {
var groupText = group.words.map(function (w) { return w.text.toLowerCase(); }).join(" ");
var computedSize = fitFontSize(groupText, CAPTION_FONT_SIZE, "700", "Montserrat", MAX_LINE_WIDTH);
var groupEl = document.createElement("div");
var copyEl = document.createElement("div");
groupEl.id = "caption-group-" + groupIndex;
@@ -285,6 +300,7 @@
lineEl.className = "caption-line";
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) {
var wordEl = document.createElement("span");
wordEl.textContent = word.text.toLowerCase();
registry/components/caption-weight-shift/registry-item.json
+1 -1
View File
@@ -12,5 +12,5 @@
"type": "hyperframes:snippet"
}
],
"preview": "https://static.heygen.ai/hyperframes-oss/registry/components/caption-weight-shift/preview.mp4"
"preview": "https://static.heygen.ai/hyperframes-oss/registry/components/caption-weight-shift/preview.mp4?v=1779051416"
}