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

Merge pull request #934 from heygen-com/feat/texture-caption-any-texture

Browse Source 
feat(registry): make caption-texture-lava work with any texture
This commit is contained in:
Miguel Ángel
2026-05-18 20:00:48 +02:00
committed by GitHub
parent 8163f38077 09af2f9cc1
commit 3af7f1cba9
11 changed files with 79 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files
registry/components/caption-texture-lava/registry-item.json
-21
View File
@@ -1,21 +0,0 @@
{
"$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
"name": "caption-texture-lava",
"type": "hyperframes:component",
"title": "Texture Lava",
"description": "Flowing lava texture mask over large uppercase text",
"tags": ["captions", "caption-style", "texture", "lava", "mask"],
"files": [
{
"path": "caption-texture-lava.html",
"target": "compositions/components/caption-texture-lava.html",
"type": "hyperframes:snippet"
},
{
"path": "lava.png",
"target": "compositions/components/lava.png",
"type": "hyperframes:asset"
}
],
"preview": "https://static.heygen.ai/hyperframes-oss/registry/components/caption-texture-lava/preview.mp4?v=1779051416"
}
registry/components/caption-texture-lava/caption-texture-lava.html → registry/components/caption-texture/caption-texture.html
Vendored
+16 -12
View File
@@ -3,13 +3,12 @@
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=1920, height=1080" />
<title>Texture Lava</title>
<title>Texture</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=Anton&display=swap" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
<style>
/* Inlined texture-mask-text component styles */
.hf-texture-text {
color: #fff;
-webkit-mask-size: var(--mask-size, cover);
@@ -20,10 +19,6 @@
mask-mode: luminance;
filter: contrast(var(--mask-contrast, 1));
}
.hf-texture-lava {
-webkit-mask-image: url("compositions/components/lava.png");
mask-image: url("compositions/components/lava.png");
}
*,
*::before,
@@ -67,7 +62,6 @@
pointer-events: none;
}
/* Lava-specific overrides for texture mask */
.lv-texture-override {
-webkit-mask-size: 200% 200%;
mask-size: 200% 200%;
@@ -101,13 +95,14 @@
</head>
<body>
<div
id="texture-lava"
data-composition-id="caption-texture-lava"
id="caption-texture"
data-composition-id="caption-texture"
data-start="0"
data-duration="8"
data-fps="30"
data-width="1920"
data-height="1080"
data-composition-variables='{"texture":{"type":"string","default":"lava"}}'
>
<video
id="lv-video"
@@ -126,6 +121,13 @@
(function () {
window.__timelines = window.__timelines || {};
var vars =
window.__hyperframes && window.__hyperframes.getVariables
? window.__hyperframes.getVariables()
: {};
var TEXTURE = vars.texture || "lava";
var TEXTURE_URL = "compositions/components/" + TEXTURE + ".png";
var _fitCanvas = document.createElement("canvas");
var _fitCtx = _fitCanvas.getContext("2d");
function fitFontSize(text, baseFontSize, fontWeight, fontFamily, maxWidth) {
@@ -170,7 +172,7 @@
{ text: "cinema.", start: 7.3, end: 7.7 },
];
var KEYWORDS = new Set([8, 12, 15, 24, 27]); // HyperFrames, HTML, professional, code, cinema.
var KEYWORDS = new Set([8, 12, 15, 24, 27]);
var container = document.getElementById("lv-container");
var tl = gsap.timeline({ paused: true });
@@ -185,10 +187,12 @@
gsap.set(shadow, { yPercent: -50 });
var wordEl = document.createElement("div");
wordEl.className = "hf-texture-text hf-texture-lava lv-texture-override lv-word";
wordEl.className = "hf-texture-text lv-texture-override lv-word";
wordEl.id = "lv-word-" + wi;
wordEl.textContent = txt;
wordEl.style.fontSize = fontSize + "px";
wordEl.style.webkitMaskImage = "url('" + TEXTURE_URL + "')";
wordEl.style.maskImage = "url('" + TEXTURE_URL + "')";
if (KEYWORDS.has(wi)) wordEl.style.color = "#FFAA44";
shadow.appendChild(wordEl);
@@ -215,7 +219,7 @@
});
tl.seek(0);
window.__timelines["caption-texture-lava"] = tl;
window.__timelines["caption-texture"] = tl;
})();
</script>
</body>
registry/components/caption-texture/concrete-042-a.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 84 KiB

registry/components/caption-texture-lava/demo.html → registry/components/caption-texture/demo.html
Vendored
+16 -12
View File
@@ -3,13 +3,12 @@
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=1920, height=1080" />
<title>Texture Lava</title>
<title>Texture</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=Anton&display=swap" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
<style>
/* Inlined texture-mask-text component styles */
.hf-texture-text {
color: #fff;
-webkit-mask-size: var(--mask-size, cover);
@@ -20,10 +19,6 @@
mask-mode: luminance;
filter: contrast(var(--mask-contrast, 1));
}
.hf-texture-lava {
-webkit-mask-image: url("compositions/components/lava.png");
mask-image: url("compositions/components/lava.png");
}
*,
*::before,
@@ -67,7 +62,6 @@
pointer-events: none;
}
/* Lava-specific overrides for texture mask */
.lv-texture-override {
-webkit-mask-size: 200% 200%;
mask-size: 200% 200%;
@@ -101,13 +95,14 @@
</head>
<body>
<div
id="texture-lava"
data-composition-id="caption-texture-lava"
id="caption-texture"
data-composition-id="caption-texture"
data-start="0"
data-duration="8"
data-fps="30"
data-width="1920"
data-height="1080"
data-composition-variables='{"texture":{"type":"string","default":"lava"}}'
>
<video
id="lv-video"
@@ -126,6 +121,13 @@
(function () {
window.__timelines = window.__timelines || {};
var vars =
window.__hyperframes && window.__hyperframes.getVariables
? window.__hyperframes.getVariables()
: {};
var TEXTURE = vars.texture || "lava";
var TEXTURE_URL = "compositions/components/" + TEXTURE + ".png";
var _fitCanvas = document.createElement("canvas");
var _fitCtx = _fitCanvas.getContext("2d");
function fitFontSize(text, baseFontSize, fontWeight, fontFamily, maxWidth) {
@@ -170,7 +172,7 @@
{ text: "cinema.", start: 7.3, end: 7.7 },
];
var KEYWORDS = new Set([8, 12, 15, 24, 27]); // HyperFrames, HTML, professional, code, cinema.
var KEYWORDS = new Set([8, 12, 15, 24, 27]);
var container = document.getElementById("lv-container");
var tl = gsap.timeline({ paused: true });
@@ -185,10 +187,12 @@
gsap.set(shadow, { yPercent: -50 });
var wordEl = document.createElement("div");
wordEl.className = "hf-texture-text hf-texture-lava lv-texture-override lv-word";
wordEl.className = "hf-texture-text lv-texture-override lv-word";
wordEl.id = "lv-word-" + wi;
wordEl.textContent = txt;
wordEl.style.fontSize = fontSize + "px";
wordEl.style.webkitMaskImage = "url('" + TEXTURE_URL + "')";
wordEl.style.maskImage = "url('" + TEXTURE_URL + "')";
if (KEYWORDS.has(wi)) wordEl.style.color = "#FFAA44";
shadow.appendChild(wordEl);
@@ -215,7 +219,7 @@
});
tl.seek(0);
window.__timelines["caption-texture-lava"] = tl;
window.__timelines["caption-texture"] = tl;
})();
</script>
</body>
registry/components/caption-texture-lava/lava.png → registry/components/caption-texture/lava.png
View File
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 73 KiB

After

Width:  |  Height:  |  Size: 73 KiB

registry/components/caption-texture/marble-012.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 93 KiB

registry/components/caption-texture/metal-046-b.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 98 KiB

registry/components/caption-texture/registry-item.json
+46
View File
@@ -0,0 +1,46 @@
{
"$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
"name": "caption-texture",
"type": "hyperframes:component",
"title": "Texture",
"description": "Flowing texture mask over large uppercase text — ships with 6 textures (lava, marble, metal, wood, concrete, rock), configurable via the texture variable",
"tags": ["captions", "caption-style", "texture", "mask"],
"files": [
{
"path": "caption-texture.html",
"target": "compositions/components/caption-texture.html",
"type": "hyperframes:snippet"
},
{
"path": "lava.png",
"target": "compositions/components/lava.png",
"type": "hyperframes:asset"
},
{
"path": "marble-012.png",
"target": "compositions/components/marble-012.png",
"type": "hyperframes:asset"
},
{
"path": "metal-046-b.png",
"target": "compositions/components/metal-046-b.png",
"type": "hyperframes:asset"
},
{
"path": "wood-066.png",
"target": "compositions/components/wood-066.png",
"type": "hyperframes:asset"
},
{
"path": "concrete-042-a.png",
"target": "compositions/components/concrete-042-a.png",
"type": "hyperframes:asset"
},
{
"path": "rock-058.png",
"target": "compositions/components/rock-058.png",
"type": "hyperframes:asset"
}
],
"preview": "https://static.heygen.ai/hyperframes-oss/registry/components/caption-texture-lava/preview.mp4?v=1779051416"
}
registry/components/caption-texture/rock-058.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 78 KiB

registry/components/caption-texture/wood-066.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 82 KiB

registry/registry.json
+1 -1
View File
@@ -128,7 +128,7 @@
"type": "hyperframes:component"
},
{
"name": "caption-texture-lava",
"name": "caption-texture",
"type": "hyperframes:component"
},
{