Skip to content

Commit a68191e

Browse files
miguel-heygenmiguel-heygen
committed
feat(registry): add VFX and Captions block categories
Add 12 new registry blocks across two new categories: **VFX Blocks (7):** - vfx-text-cursor: dramatic text reveal with cursor glow and chromatic shadows - vfx-liquid-background: organic liquid simulation with vertex displacement - vfx-iphone-device: real GLTF iPhone + MacBook with live HTML screens - vfx-magnetic: magnetic field particle visualization - vfx-portal: dimension breach portal transition - vfx-liquid-glass: Voronoi glass fracture with parallax reveal - vfx-shatter: glass shatter with physics-driven fragments **Caption Blocks (5):** - captions-slam: bold uppercase scale-pop with back.out overshoot - captions-karaoke: word-by-word color reveal on frosted glass pill - captions-minimal: clean Netflix-subtitle style fade - captions-bounce: playful elastic bounce with colorful word pills - captions-cinematic: elegant slow fade with letter-spacing animation All blocks include registry-item.json and are registered in registry.json. VFX blocks use experimental stability, caption blocks use stable.
1 parent cd277ca commit a68191e

29 files changed

Lines changed: 5576 additions & 0 deletions

‎registry/blocks/captions-bounce/captions-bounce.html‎

Lines changed: 174 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,174 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=1920, height=1080" />
6+
<title>Captions – Bounce</title>
7+
<link rel="preconnect" href="https://fonts.googleapis.com" />
8+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
9+
<link
10+
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;800&display=block"
11+
rel="stylesheet"
12+
/>
13+
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
14+
<style>
15+
* { margin: 0; padding: 0; box-sizing: border-box; }
16+
html, body {
17+
margin: 0;
18+
width: 1920px;
19+
height: 1080px;
20+
overflow: hidden;
21+
background: #000;
22+
}
23+
24+
#captions-bounce {
25+
position: relative;
26+
width: 1920px;
27+
height: 1080px;
28+
overflow: hidden;
29+
background: linear-gradient(180deg, #0e0c18 0%, #130f22 50%, #0e0c18 100%);
30+
}
31+
32+
#captions-bounce::before {
33+
content: '';
34+
position: absolute;
35+
bottom: -80px;
36+
left: 50%;
37+
transform: translateX(-50%);
38+
width: 1000px;
39+
height: 400px;
40+
background: radial-gradient(ellipse, rgba(168, 85, 247, 0.04) 0%, transparent 70%);
41+
pointer-events: none;
42+
}
43+
44+
.caption-group {
45+
position: absolute;
46+
bottom: 130px;
47+
left: 0;
48+
right: 0;
49+
display: flex;
50+
justify-content: center;
51+
align-items: center;
52+
gap: 16px;
53+
opacity: 0;
54+
visibility: hidden;
55+
will-change: opacity;
56+
font-variant-numeric: tabular-nums;
57+
}
58+
59+
.caption-group .word-pill {
60+
display: inline-block;
61+
font-family: 'Inter', system-ui, sans-serif;
62+
font-weight: 800;
63+
font-size: 64px;
64+
line-height: 1;
65+
color: #ffffff;
66+
padding: 16px 32px;
67+
border-radius: 16px;
68+
opacity: 0;
69+
transform: translateY(40px) scale(0.5);
70+
will-change: transform, opacity;
71+
}
72+
73+
/* Alternating pill colors */
74+
.word-pill-0 { background: rgba(0, 212, 255, 0.85); }
75+
.word-pill-1 { background: rgba(139, 92, 246, 0.85); }
76+
.word-pill-2 { background: rgba(16, 185, 129, 0.85); }
77+
78+
.driver {
79+
position: absolute;
80+
top: 0;
81+
left: 0;
82+
width: 1px;
83+
height: 1px;
84+
opacity: 0;
85+
}
86+
</style>
87+
</head>
88+
<body>
89+
<div
90+
id="captions-bounce"
91+
data-composition-id="captions-bounce"
92+
data-width="1920"
93+
data-height="1080"
94+
data-start="0"
95+
data-duration="13"
96+
data-root="true"
97+
>
98+
<div class="driver" data-track-index="0"></div>
99+
</div>
100+
101+
<script>
102+
(function () {
103+
var GROUPS = [
104+
{ text: "Write HTML", start: 0.3, end: 1.8 },
105+
{ text: "render video", start: 2.0, end: 3.5 },
106+
{ text: "No timeline editors", start: 3.8, end: 5.5 },
107+
{ text: "no After Effects", start: 5.7, end: 7.2 },
108+
{ text: "Ship 10x faster", start: 7.5, end: 9.5 },
109+
{ text: "with HyperFrames", start: 9.8, end: 12.0 }
110+
];
111+
112+
var PILL_COLORS = ["word-pill-0", "word-pill-1", "word-pill-2"];
113+
114+
var root = document.getElementById("captions-bounce");
115+
116+
// Build caption group elements with per-word pill spans
117+
GROUPS.forEach(function (group, gi) {
118+
var div = document.createElement("div");
119+
div.className = "caption-group";
120+
div.id = "cg-" + gi;
121+
122+
var words = group.text.split(" ");
123+
words.forEach(function (word, wi) {
124+
var span = document.createElement("span");
125+
span.className = "word-pill " + PILL_COLORS[wi % PILL_COLORS.length];
126+
span.id = "cg-" + gi + "-w" + wi;
127+
span.textContent = word;
128+
div.appendChild(span);
129+
});
130+
131+
root.appendChild(div);
132+
});
133+
134+
// Build timeline
135+
var tl = gsap.timeline({ paused: true });
136+
137+
GROUPS.forEach(function (group, gi) {
138+
var el = "#cg-" + gi;
139+
var words = group.text.split(" ");
140+
var staggerDelay = 0.08;
141+
142+
// Show group container
143+
tl.set(el, { opacity: 1, visibility: "visible" }, group.start);
144+
145+
// Bounce each word in with elastic ease, staggered
146+
words.forEach(function (word, wi) {
147+
var wordEl = "#cg-" + gi + "-w" + wi;
148+
var wordStart = group.start + wi * staggerDelay;
149+
tl.to(wordEl,
150+
{ opacity: 1, y: 0, scale: 1, duration: 0.6, ease: "elastic.out(1, 0.4)" },
151+
wordStart
152+
);
153+
});
154+
155+
// Fade out the whole group
156+
tl.to(el,
157+
{ opacity: 0, duration: 0.15, ease: "power2.in" },
158+
group.end - 0.15
159+
);
160+
161+
// Hard kill: reset all word pills and hide group
162+
words.forEach(function (word, wi) {
163+
var wordEl = "#cg-" + gi + "-w" + wi;
164+
tl.set(wordEl, { opacity: 0, y: 40, scale: 0.5 }, group.end);
165+
});
166+
tl.set(el, { opacity: 0, visibility: "hidden" }, group.end);
167+
});
168+
169+
window.__timelines = window.__timelines || [];
170+
window.__timelines.push(tl);
171+
})();
172+
</script>
173+
</body>
174+
</html>

‎registry/blocks/captions-bounce/registry-item.json‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
{
2+
"$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
3+
"name": "captions-bounce",
4+
"type": "hyperframes:block",
5+
"title": "Captions – Bounce",
6+
"description": "Playful social-media style captions with elastic bounce-in per word on alternating colorful pill backgrounds",
7+
"stability": "stable",
8+
"dimensions": { "width": 1920, "height": 1080 },
9+
"duration": 13,
10+
"tags": ["captions", "bounce"],
11+
"files": [
12+
{ "path": "captions-bounce.html", "target": "compositions/captions-bounce.html", "type": "hyperframes:composition" }
13+
]
14+
}

‎registry/blocks/captions-cinematic/captions-cinematic.html‎

Lines changed: 182 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,182 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=1920, height=1080" />
6+
<title>Captions – Cinematic</title>
7+
<link rel="preconnect" href="https://fonts.googleapis.com" />
8+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
9+
<link
10+
href="https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,300;0,400;1,300&display=block"
11+
rel="stylesheet"
12+
/>
13+
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
14+
<style>
15+
* { margin: 0; padding: 0; box-sizing: border-box; }
16+
html, body {
17+
margin: 0;
18+
width: 1920px;
19+
height: 1080px;
20+
overflow: hidden;
21+
background: #000;
22+
}
23+
24+
#captions-cinematic {
25+
position: relative;
26+
width: 1920px;
27+
height: 1080px;
28+
overflow: hidden;
29+
background: linear-gradient(180deg, #0a0908 0%, #0f0d0a 50%, #0a0908 100%);
30+
}
31+
32+
/* Warm vignette */
33+
#captions-cinematic::before {
34+
content: '';
35+
position: absolute;
36+
inset: 0;
37+
background: radial-gradient(ellipse at center, transparent 50%, rgba(0, 0, 0, 0.4) 100%);
38+
pointer-events: none;
39+
}
40+
41+
.caption-wrapper {
42+
position: absolute;
43+
bottom: 140px;
44+
left: 0;
45+
right: 0;
46+
display: flex;
47+
flex-direction: column;
48+
align-items: center;
49+
gap: 16px;
50+
opacity: 0;
51+
visibility: hidden;
52+
will-change: opacity;
53+
}
54+
55+
.caption-line {
56+
position: relative;
57+
width: 120px;
58+
height: 1px;
59+
background: rgba(245, 240, 232, 0.4);
60+
transform: scaleX(0);
61+
will-change: transform;
62+
}
63+
64+
.caption-text {
65+
font-family: 'Inter', system-ui, sans-serif;
66+
font-weight: 300;
67+
font-style: italic;
68+
font-size: 48px;
69+
line-height: 1.4;
70+
color: #f5f0e8;
71+
letter-spacing: 4px;
72+
text-align: center;
73+
opacity: 0;
74+
will-change: opacity, letter-spacing;
75+
font-variant-numeric: tabular-nums;
76+
}
77+
78+
.driver {
79+
position: absolute;
80+
top: 0;
81+
left: 0;
82+
width: 1px;
83+
height: 1px;
84+
opacity: 0;
85+
}
86+
</style>
87+
</head>
88+
<body>
89+
<div
90+
id="captions-cinematic"
91+
data-composition-id="captions-cinematic"
92+
data-width="1920"
93+
data-height="1080"
94+
data-start="0"
95+
data-duration="13"
96+
data-root="true"
97+
>
98+
<div class="driver" data-track-index="0"></div>
99+
</div>
100+
101+
<script>
102+
(function () {
103+
var GROUPS = [
104+
{ text: "Write HTML", start: 0.3, end: 1.8 },
105+
{ text: "render video", start: 2.0, end: 3.5 },
106+
{ text: "No timeline editors", start: 3.8, end: 5.5 },
107+
{ text: "no After Effects", start: 5.7, end: 7.2 },
108+
{ text: "Ship 10x faster", start: 7.5, end: 9.5 },
109+
{ text: "with HyperFrames", start: 9.8, end: 12.0 }
110+
];
111+
112+
var root = document.getElementById("captions-cinematic");
113+
114+
// Build caption group elements: line + text
115+
GROUPS.forEach(function (group, gi) {
116+
var wrapper = document.createElement("div");
117+
wrapper.className = "caption-wrapper";
118+
wrapper.id = "cg-wrap-" + gi;
119+
120+
var line = document.createElement("div");
121+
line.className = "caption-line";
122+
line.id = "cg-line-" + gi;
123+
124+
var text = document.createElement("div");
125+
text.className = "caption-text";
126+
text.id = "cg-" + gi;
127+
text.textContent = group.text;
128+
129+
wrapper.appendChild(line);
130+
wrapper.appendChild(text);
131+
root.appendChild(wrapper);
132+
});
133+
134+
// Build timeline
135+
var tl = gsap.timeline({ paused: true });
136+
137+
GROUPS.forEach(function (group, gi) {
138+
var wrapEl = "#cg-wrap-" + gi;
139+
var lineEl = "#cg-line-" + gi;
140+
var textEl = "#cg-" + gi;
141+
142+
// Show wrapper
143+
tl.set(wrapEl, { opacity: 1, visibility: "visible" }, group.start);
144+
145+
// Line extends from center
146+
tl.fromTo(lineEl,
147+
{ scaleX: 0 },
148+
{ scaleX: 1, duration: 0.4, ease: "power2.out", transformOrigin: "center" },
149+
group.start
150+
);
151+
152+
// Text fades in with letter-spacing settling
153+
tl.fromTo(textEl,
154+
{ opacity: 0, letterSpacing: "8px" },
155+
{ opacity: 1, letterSpacing: "4px", duration: 0.6, ease: "power1.out" },
156+
group.start + 0.1
157+
);
158+
159+
// Text fades out slowly
160+
tl.to(textEl,
161+
{ opacity: 0, duration: 0.4, ease: "power1.in" },
162+
group.end - 0.4
163+
);
164+
165+
// Line contracts
166+
tl.to(lineEl,
167+
{ scaleX: 0, duration: 0.3, ease: "power2.in" },
168+
group.end - 0.3
169+
);
170+
171+
// Hard kill
172+
tl.set(wrapEl, { opacity: 0, visibility: "hidden" }, group.end);
173+
tl.set(textEl, { opacity: 0 }, group.end);
174+
tl.set(lineEl, { scaleX: 0 }, group.end);
175+
});
176+
177+
window.__timelines = window.__timelines || [];
178+
window.__timelines.push(tl);
179+
})();
180+
</script>
181+
</body>
182+
</html>

‎registry/blocks/captions-cinematic/registry-item.json‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
{
2+
"$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
3+
"name": "captions-cinematic",
4+
"type": "hyperframes:block",
5+
"title": "Captions – Cinematic",
6+
"description": "Elegant film-title captions with slow fade, letter-spacing animation, warm tint, and extending horizontal accent line",
7+
"stability": "stable",
8+
"dimensions": { "width": 1920, "height": 1080 },
9+
"duration": 13,
10+
"tags": ["captions", "cinematic"],
11+
"files": [
12+
{ "path": "captions-cinematic.html", "target": "compositions/captions-cinematic.html", "type": "hyperframes:composition" }
13+
]
14+
}

0 commit comments

Comments
 (0)