Skip to content

Commit 3af7f1c

Browse files
miguel-heygenmiguel-heygen
authored
Merge pull request #934 from heygen-com/feat/texture-caption-any-texture
feat(registry): make caption-texture-lava work with any texture
2 parents 8163f38 + 09af2f9 commit 3af7f1c

11 files changed

Lines changed: 79 additions & 46 deletions

File tree

‎registry/components/caption-texture-lava/registry-item.json‎

Lines changed: 0 additions & 21 deletions
This file was deleted.

registry/components/caption-texture-lava/caption-texture-lava.html renamed to registry/components/caption-texture/caption-texture.html

Lines changed: 16 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,12 @@
33
<head>
44
<meta charset="UTF-8" />
55
<meta name="viewport" content="width=1920, height=1080" />
6-
<title>Texture Lava</title>
6+
<title>Texture</title>
77
<link rel="preconnect" href="https://fonts.googleapis.com" />
88
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
99
<link href="https://fonts.googleapis.com/css2?family=Anton&display=swap" rel="stylesheet" />
1010
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
1111
<style>
12-
/* Inlined texture-mask-text component styles */
1312
.hf-texture-text {
1413
color: #fff;
1514
-webkit-mask-size: var(--mask-size, cover);
@@ -20,10 +19,6 @@
2019
mask-mode: luminance;
2120
filter: contrast(var(--mask-contrast, 1));
2221
}
23-
.hf-texture-lava {
24-
-webkit-mask-image: url("compositions/components/lava.png");
25-
mask-image: url("compositions/components/lava.png");
26-
}
2722

2823
*,
2924
*::before,
@@ -67,7 +62,6 @@
6762
pointer-events: none;
6863
}
6964

70-
/* Lava-specific overrides for texture mask */
7165
.lv-texture-override {
7266
-webkit-mask-size: 200% 200%;
7367
mask-size: 200% 200%;
@@ -101,13 +95,14 @@
10195
</head>
10296
<body>
10397
<div
104-
id="texture-lava"
105-
data-composition-id="caption-texture-lava"
98+
id="caption-texture"
99+
data-composition-id="caption-texture"
106100
data-start="0"
107101
data-duration="8"
108102
data-fps="30"
109103
data-width="1920"
110104
data-height="1080"
105+
data-composition-variables='{"texture":{"type":"string","default":"lava"}}'
111106
>
112107
<video
113108
id="lv-video"
@@ -126,6 +121,13 @@
126121
(function () {
127122
window.__timelines = window.__timelines || {};
128123

124+
var vars =
125+
window.__hyperframes && window.__hyperframes.getVariables
126+
? window.__hyperframes.getVariables()
127+
: {};
128+
var TEXTURE = vars.texture || "lava";
129+
var TEXTURE_URL = "compositions/components/" + TEXTURE + ".png";
130+
129131
var _fitCanvas = document.createElement("canvas");
130132
var _fitCtx = _fitCanvas.getContext("2d");
131133
function fitFontSize(text, baseFontSize, fontWeight, fontFamily, maxWidth) {
@@ -170,7 +172,7 @@
170172
{ text: "cinema.", start: 7.3, end: 7.7 },
171173
];
172174

173-
var KEYWORDS = new Set([8, 12, 15, 24, 27]); // HyperFrames, HTML, professional, code, cinema.
175+
var KEYWORDS = new Set([8, 12, 15, 24, 27]);
174176

175177
var container = document.getElementById("lv-container");
176178
var tl = gsap.timeline({ paused: true });
@@ -185,10 +187,12 @@
185187
gsap.set(shadow, { yPercent: -50 });
186188

187189
var wordEl = document.createElement("div");
188-
wordEl.className = "hf-texture-text hf-texture-lava lv-texture-override lv-word";
190+
wordEl.className = "hf-texture-text lv-texture-override lv-word";
189191
wordEl.id = "lv-word-" + wi;
190192
wordEl.textContent = txt;
191193
wordEl.style.fontSize = fontSize + "px";
194+
wordEl.style.webkitMaskImage = "url('" + TEXTURE_URL + "')";
195+
wordEl.style.maskImage = "url('" + TEXTURE_URL + "')";
192196
if (KEYWORDS.has(wi)) wordEl.style.color = "#FFAA44";
193197

194198
shadow.appendChild(wordEl);
@@ -215,7 +219,7 @@
215219
});
216220

217221
tl.seek(0);
218-
window.__timelines["caption-texture-lava"] = tl;
222+
window.__timelines["caption-texture"] = tl;
219223
})();
220224
</script>
221225
</body>

‎registry/components/caption-texture/concrete-042-a.png‎

84.3 KB
Loading

registry/components/caption-texture-lava/demo.html renamed to registry/components/caption-texture/demo.html

Lines changed: 16 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,12 @@
33
<head>
44
<meta charset="UTF-8" />
55
<meta name="viewport" content="width=1920, height=1080" />
6-
<title>Texture Lava</title>
6+
<title>Texture</title>
77
<link rel="preconnect" href="https://fonts.googleapis.com" />
88
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
99
<link href="https://fonts.googleapis.com/css2?family=Anton&display=swap" rel="stylesheet" />
1010
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
1111
<style>
12-
/* Inlined texture-mask-text component styles */
1312
.hf-texture-text {
1413
color: #fff;
1514
-webkit-mask-size: var(--mask-size, cover);
@@ -20,10 +19,6 @@
2019
mask-mode: luminance;
2120
filter: contrast(var(--mask-contrast, 1));
2221
}
23-
.hf-texture-lava {
24-
-webkit-mask-image: url("compositions/components/lava.png");
25-
mask-image: url("compositions/components/lava.png");
26-
}
2722

2823
*,
2924
*::before,
@@ -67,7 +62,6 @@
6762
pointer-events: none;
6863
}
6964

70-
/* Lava-specific overrides for texture mask */
7165
.lv-texture-override {
7266
-webkit-mask-size: 200% 200%;
7367
mask-size: 200% 200%;
@@ -101,13 +95,14 @@
10195
</head>
10296
<body>
10397
<div
104-
id="texture-lava"
105-
data-composition-id="caption-texture-lava"
98+
id="caption-texture"
99+
data-composition-id="caption-texture"
106100
data-start="0"
107101
data-duration="8"
108102
data-fps="30"
109103
data-width="1920"
110104
data-height="1080"
105+
data-composition-variables='{"texture":{"type":"string","default":"lava"}}'
111106
>
112107
<video
113108
id="lv-video"
@@ -126,6 +121,13 @@
126121
(function () {
127122
window.__timelines = window.__timelines || {};
128123

124+
var vars =
125+
window.__hyperframes && window.__hyperframes.getVariables
126+
? window.__hyperframes.getVariables()
127+
: {};
128+
var TEXTURE = vars.texture || "lava";
129+
var TEXTURE_URL = "compositions/components/" + TEXTURE + ".png";
130+
129131
var _fitCanvas = document.createElement("canvas");
130132
var _fitCtx = _fitCanvas.getContext("2d");
131133
function fitFontSize(text, baseFontSize, fontWeight, fontFamily, maxWidth) {
@@ -170,7 +172,7 @@
170172
{ text: "cinema.", start: 7.3, end: 7.7 },
171173
];
172174

173-
var KEYWORDS = new Set([8, 12, 15, 24, 27]); // HyperFrames, HTML, professional, code, cinema.
175+
var KEYWORDS = new Set([8, 12, 15, 24, 27]);
174176

175177
var container = document.getElementById("lv-container");
176178
var tl = gsap.timeline({ paused: true });
@@ -185,10 +187,12 @@
185187
gsap.set(shadow, { yPercent: -50 });
186188

187189
var wordEl = document.createElement("div");
188-
wordEl.className = "hf-texture-text hf-texture-lava lv-texture-override lv-word";
190+
wordEl.className = "hf-texture-text lv-texture-override lv-word";
189191
wordEl.id = "lv-word-" + wi;
190192
wordEl.textContent = txt;
191193
wordEl.style.fontSize = fontSize + "px";
194+
wordEl.style.webkitMaskImage = "url('" + TEXTURE_URL + "')";
195+
wordEl.style.maskImage = "url('" + TEXTURE_URL + "')";
192196
if (KEYWORDS.has(wi)) wordEl.style.color = "#FFAA44";
193197

194198
shadow.appendChild(wordEl);
@@ -215,7 +219,7 @@
215219
});
216220

217221
tl.seek(0);
218-
window.__timelines["caption-texture-lava"] = tl;
222+
window.__timelines["caption-texture"] = tl;
219223
})();
220224
</script>
221225
</body>

registry/components/caption-texture-lava/lava.png renamed to registry/components/caption-texture/lava.png

File renamed without changes.

‎registry/components/caption-texture/marble-012.png‎

92.9 KB
Loading

‎registry/components/caption-texture/metal-046-b.png‎

98.4 KB
Loading

‎registry/components/caption-texture/registry-item.json‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
{
2+
"$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
3+
"name": "caption-texture",
4+
"type": "hyperframes:component",
5+
"title": "Texture",
6+
"description": "Flowing texture mask over large uppercase text — ships with 6 textures (lava, marble, metal, wood, concrete, rock), configurable via the texture variable",
7+
"tags": ["captions", "caption-style", "texture", "mask"],
8+
"files": [
9+
{
10+
"path": "caption-texture.html",
11+
"target": "compositions/components/caption-texture.html",
12+
"type": "hyperframes:snippet"
13+
},
14+
{
15+
"path": "lava.png",
16+
"target": "compositions/components/lava.png",
17+
"type": "hyperframes:asset"
18+
},
19+
{
20+
"path": "marble-012.png",
21+
"target": "compositions/components/marble-012.png",
22+
"type": "hyperframes:asset"
23+
},
24+
{
25+
"path": "metal-046-b.png",
26+
"target": "compositions/components/metal-046-b.png",
27+
"type": "hyperframes:asset"
28+
},
29+
{
30+
"path": "wood-066.png",
31+
"target": "compositions/components/wood-066.png",
32+
"type": "hyperframes:asset"
33+
},
34+
{
35+
"path": "concrete-042-a.png",
36+
"target": "compositions/components/concrete-042-a.png",
37+
"type": "hyperframes:asset"
38+
},
39+
{
40+
"path": "rock-058.png",
41+
"target": "compositions/components/rock-058.png",
42+
"type": "hyperframes:asset"
43+
}
44+
],
45+
"preview": "https://static.heygen.ai/hyperframes-oss/registry/components/caption-texture-lava/preview.mp4?v=1779051416"
46+
}

‎registry/components/caption-texture/rock-058.png‎

78.4 KB
Loading

‎registry/components/caption-texture/wood-066.png‎

82 KB
Loading

0 commit comments

Comments
 (0)