hyperframes 0.1.0 → 0.1.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +121 -0
- package/dist/cli.js +1057 -666
- package/dist/docs/compositions.md +8 -1
- package/dist/docs/data-attributes.md +4 -0
- package/dist/docs/gsap.md +3 -0
- package/dist/docs/rendering.md +4 -0
- package/dist/docs/templates.md +4 -0
- package/dist/docs/troubleshooting.md +7 -0
- package/dist/hyperframe-runtime.js +3 -3
- package/dist/studio/index.html +11 -11
- package/dist/templates/play-mode/compositions/captions.html +89 -29
- package/dist/templates/play-mode/compositions/intro.html +89 -71
- package/dist/templates/play-mode/compositions/stats.html +203 -73
- package/dist/templates/play-mode/index.html +204 -148
- package/dist/templates/swiss-grid/compositions/captions.html +63 -16
- package/dist/templates/swiss-grid/compositions/graphics.html +51 -43
- package/dist/templates/swiss-grid/compositions/intro.html +41 -25
- package/dist/templates/swiss-grid/index.html +216 -165
- package/dist/templates/vignelli/compositions/captions.html +80 -27
- package/dist/templates/vignelli/compositions/overlays.html +82 -31
- package/dist/templates/vignelli/index.html +171 -164
- package/dist/templates/warm-grain/compositions/captions.html +73 -65
- package/dist/templates/warm-grain/compositions/graphics.html +28 -22
- package/dist/templates/warm-grain/compositions/intro.html +28 -20
- package/dist/templates/warm-grain/index.html +265 -179
- package/package.json +5 -5
|
@@ -1,173 +1,229 @@
|
|
|
1
|
-
<!
|
|
1
|
+
<!doctype html>
|
|
2
2
|
<html lang="en">
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="UTF-8"
|
|
5
|
-
<meta name="viewport" content="width=device-width, initial-scale=1.0"
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8" />
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
6
6
|
<title>Hyperframes - Play Mode</title>
|
|
7
7
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
|
|
8
8
|
<style>
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
9
|
+
body,
|
|
10
|
+
html {
|
|
11
|
+
margin: 0;
|
|
12
|
+
padding: 0;
|
|
13
|
+
width: 1920px;
|
|
14
|
+
height: 1080px;
|
|
15
|
+
overflow: hidden;
|
|
16
|
+
background-color: #ffffff;
|
|
17
|
+
font-family: "Nunito", sans-serif;
|
|
18
|
+
}
|
|
18
19
|
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
20
|
+
#main-composition {
|
|
21
|
+
width: 1920px;
|
|
22
|
+
height: 1080px;
|
|
23
|
+
position: relative;
|
|
24
|
+
}
|
|
24
25
|
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
26
|
+
#bg-comp,
|
|
27
|
+
#aroll-comp,
|
|
28
|
+
#intro-comp,
|
|
29
|
+
#stats-comp,
|
|
30
|
+
#captions-comp {
|
|
31
|
+
position: absolute;
|
|
32
|
+
top: 0;
|
|
33
|
+
left: 0;
|
|
34
|
+
width: 100%;
|
|
35
|
+
height: 100%;
|
|
36
|
+
}
|
|
36
37
|
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
38
|
+
#bg-comp {
|
|
39
|
+
z-index: 1;
|
|
40
|
+
}
|
|
40
41
|
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
42
|
+
#aroll-comp {
|
|
43
|
+
z-index: 10;
|
|
44
|
+
}
|
|
44
45
|
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
46
|
+
#intro-comp {
|
|
47
|
+
z-index: 100;
|
|
48
|
+
}
|
|
48
49
|
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
50
|
+
#stats-comp {
|
|
51
|
+
z-index: 150;
|
|
52
|
+
}
|
|
52
53
|
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
54
|
+
#captions-comp {
|
|
55
|
+
z-index: 200;
|
|
56
|
+
}
|
|
56
57
|
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
58
|
+
#aroll-container {
|
|
59
|
+
position: absolute;
|
|
60
|
+
width: 100%;
|
|
61
|
+
height: 100%;
|
|
62
|
+
display: flex;
|
|
63
|
+
justify-content: center;
|
|
64
|
+
align-items: center;
|
|
65
|
+
z-index: 0;
|
|
66
|
+
}
|
|
66
67
|
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
68
|
+
#short_mag_cut {
|
|
69
|
+
border-radius: 16px;
|
|
70
|
+
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
|
|
71
|
+
border: 8px solid #ffffff;
|
|
72
|
+
}
|
|
72
73
|
|
|
73
|
-
|
|
74
|
+
#background-layer {
|
|
75
|
+
position: absolute;
|
|
76
|
+
top: 0;
|
|
77
|
+
left: 0;
|
|
78
|
+
width: 100%;
|
|
79
|
+
height: 100%;
|
|
80
|
+
background-color: #ffffff;
|
|
81
|
+
z-index: 0;
|
|
82
|
+
}
|
|
83
|
+
</style>
|
|
84
|
+
<link
|
|
85
|
+
href="https://fonts.googleapis.com/css2?family=Nunito:wght@900&display=swap"
|
|
86
|
+
rel="stylesheet"
|
|
87
|
+
/>
|
|
88
|
+
</head>
|
|
89
|
+
<body>
|
|
90
|
+
<div
|
|
91
|
+
id="main-composition"
|
|
92
|
+
data-composition-id="main-video"
|
|
93
|
+
data-start="0"
|
|
94
|
+
data-duration="16.04"
|
|
95
|
+
data-width="1920"
|
|
96
|
+
data-height="1080"
|
|
97
|
+
>
|
|
98
|
+
<!-- Background Layer Composition -->
|
|
99
|
+
<div
|
|
100
|
+
id="bg-comp"
|
|
101
|
+
data-composition-id="background"
|
|
102
|
+
data-start="0"
|
|
103
|
+
data-duration="16.04"
|
|
104
|
+
data-width="1920"
|
|
105
|
+
data-height="1080"
|
|
106
|
+
data-track-index="1"
|
|
107
|
+
>
|
|
108
|
+
<div id="background-layer"></div>
|
|
109
|
+
<style>
|
|
110
|
+
#background-layer {
|
|
74
111
|
position: absolute;
|
|
75
112
|
top: 0;
|
|
76
113
|
left: 0;
|
|
77
114
|
width: 100%;
|
|
78
115
|
height: 100%;
|
|
79
|
-
background-color: #
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
left: 0;
|
|
95
|
-
width: 100%;
|
|
96
|
-
height: 100%;
|
|
97
|
-
background-color: #FFFFFF;
|
|
98
|
-
}
|
|
99
|
-
</style>
|
|
100
|
-
<script>
|
|
101
|
-
(function() {
|
|
102
|
-
const tl = gsap.timeline({ paused: true });
|
|
103
|
-
const bg = document.getElementById('background-layer');
|
|
104
|
-
// Sync with A-roll framing 3 (4.659s)
|
|
105
|
-
tl.to(bg, { backgroundColor: "#0057FF", duration: 0.5 }, 4.659);
|
|
106
|
-
// Sync with A-roll framing 4 (8.88s)
|
|
107
|
-
tl.to(bg, { backgroundColor: "#FFFFFF", duration: 0.5 }, 8.88);
|
|
108
|
-
window.__timelines["background"] = tl;
|
|
109
|
-
})();
|
|
110
|
-
</script>
|
|
111
|
-
</div>
|
|
116
|
+
background-color: #ffffff;
|
|
117
|
+
}
|
|
118
|
+
</style>
|
|
119
|
+
<script>
|
|
120
|
+
(function () {
|
|
121
|
+
const tl = gsap.timeline({ paused: true });
|
|
122
|
+
const bg = document.getElementById("background-layer");
|
|
123
|
+
// Sync with A-roll framing 3 (4.659s)
|
|
124
|
+
tl.to(bg, { backgroundColor: "#0057FF", duration: 0.5 }, 4.659);
|
|
125
|
+
// Sync with A-roll framing 4 (8.88s)
|
|
126
|
+
tl.to(bg, { backgroundColor: "#FFFFFF", duration: 0.5 }, 8.88);
|
|
127
|
+
window.__timelines["background"] = tl;
|
|
128
|
+
})();
|
|
129
|
+
</script>
|
|
130
|
+
</div>
|
|
112
131
|
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
#short_mag_cut {
|
|
133
|
-
border-radius: 16px;
|
|
134
|
-
box-shadow: 0 20px 60px rgba(0,0,0,0.4);
|
|
135
|
-
border: 8px solid #FFFFFF;
|
|
136
|
-
}
|
|
137
|
-
</style>
|
|
138
|
-
<script>
|
|
139
|
-
(function() {
|
|
140
|
-
const tl = gsap.timeline({ paused: true });
|
|
141
|
-
const container = document.getElementById('aroll-container');
|
|
142
|
-
gsap.set(container, { y: -1100, scale: 0.8 });
|
|
143
|
-
tl.to(container, { y: 0, duration: 1.2, ease: "elastic.out(1, 0.6)" }, 0);
|
|
144
|
-
tl.to(container, { scale: 1.4, x: -300, duration: 1, ease: "back.out(1.7)" }, 1.839);
|
|
145
|
-
tl.to(container, { scale: 0.7, x: 400, duration: 1, ease: "back.out(1.7)" }, 4.659);
|
|
146
|
-
tl.to(container, { scale: 0.9, x: 0, duration: 1, ease: "back.out(1.7)" }, 8.88);
|
|
147
|
-
window.__timelines["aroll-layer"] = tl;
|
|
148
|
-
})();
|
|
149
|
-
</script>
|
|
132
|
+
<!-- A-roll Layer Composition -->
|
|
133
|
+
<div
|
|
134
|
+
id="aroll-comp"
|
|
135
|
+
data-composition-id="aroll-layer"
|
|
136
|
+
data-start="0"
|
|
137
|
+
data-duration="16.04"
|
|
138
|
+
data-width="1920"
|
|
139
|
+
data-height="1080"
|
|
140
|
+
data-track-index="10"
|
|
141
|
+
>
|
|
142
|
+
<div id="aroll-container">
|
|
143
|
+
<video
|
|
144
|
+
id="short_mag_cut"
|
|
145
|
+
src="__VIDEO_SRC__"
|
|
146
|
+
data-start="0"
|
|
147
|
+
data-duration="16.04"
|
|
148
|
+
data-track-index="1"
|
|
149
|
+
style="width: 100%; height: auto"
|
|
150
|
+
></video>
|
|
150
151
|
</div>
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
152
|
+
<style>
|
|
153
|
+
#aroll-container {
|
|
154
|
+
position: absolute;
|
|
155
|
+
width: 100%;
|
|
156
|
+
height: 100%;
|
|
157
|
+
display: flex;
|
|
158
|
+
justify-content: center;
|
|
159
|
+
align-items: center;
|
|
160
|
+
}
|
|
161
|
+
#short_mag_cut {
|
|
162
|
+
border-radius: 16px;
|
|
163
|
+
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
|
|
164
|
+
border: 8px solid #ffffff;
|
|
165
|
+
}
|
|
166
|
+
</style>
|
|
166
167
|
<script>
|
|
167
|
-
|
|
168
|
+
(function () {
|
|
168
169
|
const tl = gsap.timeline({ paused: true });
|
|
169
|
-
|
|
170
|
+
const container = document.getElementById("aroll-container");
|
|
171
|
+
gsap.set(container, { y: -1100, scale: 0.8 });
|
|
172
|
+
tl.to(container, { y: 0, duration: 1.2, ease: "elastic.out(1, 0.6)" }, 0);
|
|
173
|
+
tl.to(container, { scale: 1.4, x: -300, duration: 1, ease: "back.out(1.7)" }, 1.839);
|
|
174
|
+
tl.to(container, { scale: 0.7, x: 400, duration: 1, ease: "back.out(1.7)" }, 4.659);
|
|
175
|
+
tl.to(container, { scale: 0.9, x: 0, duration: 1, ease: "back.out(1.7)" }, 8.88);
|
|
176
|
+
window.__timelines["aroll-layer"] = tl;
|
|
177
|
+
})();
|
|
170
178
|
</script>
|
|
179
|
+
</div>
|
|
180
|
+
|
|
181
|
+
<!-- Compositions -->
|
|
182
|
+
<div
|
|
183
|
+
id="intro-comp"
|
|
184
|
+
data-composition-id="intro"
|
|
185
|
+
data-composition-src="compositions/intro.html"
|
|
186
|
+
data-start="0"
|
|
187
|
+
data-duration="16.04"
|
|
188
|
+
data-width="1920"
|
|
189
|
+
data-height="1080"
|
|
190
|
+
data-track-index="100"
|
|
191
|
+
></div>
|
|
192
|
+
<div
|
|
193
|
+
id="captions-comp"
|
|
194
|
+
data-composition-id="captions"
|
|
195
|
+
data-composition-src="compositions/captions.html"
|
|
196
|
+
data-start="0"
|
|
197
|
+
data-duration="16.04"
|
|
198
|
+
data-width="1920"
|
|
199
|
+
data-height="1080"
|
|
200
|
+
data-track-index="200"
|
|
201
|
+
></div>
|
|
202
|
+
<div
|
|
203
|
+
id="stats-comp"
|
|
204
|
+
data-composition-id="stats"
|
|
205
|
+
data-composition-src="compositions/stats.html"
|
|
206
|
+
data-start="0"
|
|
207
|
+
data-duration="16.04"
|
|
208
|
+
data-width="1920"
|
|
209
|
+
data-height="1080"
|
|
210
|
+
data-track-index="150"
|
|
211
|
+
></div>
|
|
212
|
+
|
|
213
|
+
<!-- Audio Clips -->
|
|
214
|
+
<audio id="sfx-bounce-0" src="" data-start="0" data-track-index="5"></audio>
|
|
215
|
+
<audio id="sfx-whoosh-1" src="" data-start="1.839" data-track-index="6"></audio>
|
|
216
|
+
<audio id="sfx-pop-1" src="" data-start="2.039" data-track-index="7"></audio>
|
|
217
|
+
<audio id="sfx-whoosh-2" src="" data-start="4.659" data-track-index="6"></audio>
|
|
218
|
+
<audio id="sfx-pop-2" src="" data-start="4.859" data-track-index="7"></audio>
|
|
219
|
+
<audio id="sfx-whoosh-3" src="" data-start="8.88" data-track-index="6"></audio>
|
|
220
|
+
<audio id="sfx-pop-3" src="" data-start="9.08" data-track-index="7"></audio>
|
|
221
|
+
|
|
222
|
+
<script>
|
|
223
|
+
window.__timelines = window.__timelines || {};
|
|
224
|
+
const tl = gsap.timeline({ paused: true });
|
|
225
|
+
window.__timelines["main-video"] = tl;
|
|
226
|
+
</script>
|
|
171
227
|
</div>
|
|
172
|
-
</body>
|
|
173
|
-
</html>
|
|
228
|
+
</body>
|
|
229
|
+
</html>
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
width: 1920px;
|
|
8
8
|
height: 1080px;
|
|
9
9
|
position: relative;
|
|
10
|
-
font-family:
|
|
10
|
+
font-family: "Helvetica", "Arial", sans-serif;
|
|
11
11
|
font-weight: bold;
|
|
12
12
|
overflow: hidden;
|
|
13
13
|
}
|
|
@@ -24,7 +24,7 @@
|
|
|
24
24
|
}
|
|
25
25
|
|
|
26
26
|
[data-composition-id="captions"] .caption-box {
|
|
27
|
-
background-color: #
|
|
27
|
+
background-color: #0a1e3d; /* Solid navy */
|
|
28
28
|
padding: 20px 40px;
|
|
29
29
|
display: none; /* Hidden by default, shown via GSAP */
|
|
30
30
|
justify-content: center;
|
|
@@ -33,7 +33,7 @@
|
|
|
33
33
|
}
|
|
34
34
|
|
|
35
35
|
[data-composition-id="captions"] .caption-text {
|
|
36
|
-
color: #
|
|
36
|
+
color: #f2f2f2; /* Off-white */
|
|
37
37
|
font-size: 72px;
|
|
38
38
|
text-transform: uppercase; /* Swiss style often uses uppercase for impact */
|
|
39
39
|
letter-spacing: -2px;
|
|
@@ -44,9 +44,56 @@
|
|
|
44
44
|
</style>
|
|
45
45
|
|
|
46
46
|
<script>
|
|
47
|
-
(function() {
|
|
48
|
-
const TRANSCRIPT = [
|
|
49
|
-
|
|
47
|
+
(function () {
|
|
48
|
+
const TRANSCRIPT = [
|
|
49
|
+
{ text: "We", start: 0.119, end: 0.259 },
|
|
50
|
+
{ text: "asked", start: 0.319, end: 0.479 },
|
|
51
|
+
{ text: "what", start: 0.519, end: 0.659 },
|
|
52
|
+
{ text: "you", start: 0.699, end: 0.819 },
|
|
53
|
+
{ text: "needed.", start: 0.859, end: 1.819 },
|
|
54
|
+
{ text: "Forty-seven", start: 1.86, end: 2.299 },
|
|
55
|
+
{ text: "percent", start: 2.399, end: 2.679 },
|
|
56
|
+
{ text: "of", start: 2.7, end: 2.799 },
|
|
57
|
+
{ text: "you", start: 2.839, end: 2.939 },
|
|
58
|
+
{ text: "said", start: 3.039, end: 3.179 },
|
|
59
|
+
{ text: "motion", start: 3.24, end: 3.559 },
|
|
60
|
+
{ text: "graphics,", start: 3.579, end: 4.599 },
|
|
61
|
+
{ text: "sixty-two", start: 4.679, end: 5.179 },
|
|
62
|
+
{ text: "percent", start: 5.299, end: 5.759 },
|
|
63
|
+
{ text: "said", start: 5.859, end: 5.98 },
|
|
64
|
+
{ text: "static", start: 6.079, end: 6.399 },
|
|
65
|
+
{ text: "content", start: 6.46, end: 6.879 },
|
|
66
|
+
{ text: "was", start: 6.92, end: 7.079 },
|
|
67
|
+
{ text: "costing", start: 7.099, end: 7.48 },
|
|
68
|
+
{ text: "you", start: 7.5, end: 7.579 },
|
|
69
|
+
{ text: "attention,", start: 7.679, end: 8.659 },
|
|
70
|
+
{ text: "and", start: 8.699, end: 8.86 },
|
|
71
|
+
{ text: "three", start: 8.88, end: 9.06 },
|
|
72
|
+
{ text: "out", start: 9.079, end: 9.18 },
|
|
73
|
+
{ text: "of", start: 9.199, end: 9.34 },
|
|
74
|
+
{ text: "four", start: 9.38, end: 9.799 },
|
|
75
|
+
{ text: "said", start: 9.84, end: 10.0 },
|
|
76
|
+
{ text: "you", start: 10.019, end: 10.159 },
|
|
77
|
+
{ text: "know", start: 10.179, end: 10.36 },
|
|
78
|
+
{ text: "the", start: 10.38, end: 10.42 },
|
|
79
|
+
{ text: "look", start: 10.519, end: 10.699 },
|
|
80
|
+
{ text: "you", start: 10.739, end: 10.859 },
|
|
81
|
+
{ text: "want", start: 10.98, end: 11.34 },
|
|
82
|
+
{ text: "but", start: 11.359, end: 11.52 },
|
|
83
|
+
{ text: "don't", start: 11.56, end: 11.779 },
|
|
84
|
+
{ text: "have", start: 11.819, end: 11.94 },
|
|
85
|
+
{ text: "the", start: 11.96, end: 12.06 },
|
|
86
|
+
{ text: "editing", start: 12.079, end: 12.4 },
|
|
87
|
+
{ text: "skills", start: 12.52, end: 12.86 },
|
|
88
|
+
{ text: "to", start: 12.88, end: 13.0 },
|
|
89
|
+
{ text: "get", start: 13.019, end: 13.18 },
|
|
90
|
+
{ text: "there.", start: 13.22, end: 14.22 },
|
|
91
|
+
{ text: "So", start: 14.239, end: 14.399 },
|
|
92
|
+
{ text: "we", start: 14.42, end: 14.52 },
|
|
93
|
+
{ text: "built", start: 14.619, end: 14.88 },
|
|
94
|
+
{ text: "Hyperframes", start: 15.079, end: 15.42 },
|
|
95
|
+
];
|
|
96
|
+
const container = document.getElementById("caption-container");
|
|
50
97
|
const tl = gsap.timeline({ paused: true });
|
|
51
98
|
|
|
52
99
|
if (!TRANSCRIPT || TRANSCRIPT.length === 0) {
|
|
@@ -57,7 +104,7 @@
|
|
|
57
104
|
// Group transcript into max 5 words per group
|
|
58
105
|
const groups = [];
|
|
59
106
|
let currentGroup = [];
|
|
60
|
-
|
|
107
|
+
|
|
61
108
|
TRANSCRIPT.forEach((word, index) => {
|
|
62
109
|
currentGroup.push(word);
|
|
63
110
|
// Group by 5 words OR if it's the last word
|
|
@@ -69,14 +116,14 @@
|
|
|
69
116
|
|
|
70
117
|
// Create DOM elements and timeline for each group
|
|
71
118
|
groups.forEach((group, i) => {
|
|
72
|
-
const box = document.createElement(
|
|
73
|
-
box.className =
|
|
119
|
+
const box = document.createElement("div");
|
|
120
|
+
box.className = "caption-box";
|
|
74
121
|
box.id = `group-${i}`;
|
|
75
|
-
|
|
76
|
-
const text = document.createElement(
|
|
77
|
-
text.className =
|
|
78
|
-
text.textContent = group.map(w => w.text).join(
|
|
79
|
-
|
|
122
|
+
|
|
123
|
+
const text = document.createElement("div");
|
|
124
|
+
text.className = "caption-text";
|
|
125
|
+
text.textContent = group.map((w) => w.text).join(" ");
|
|
126
|
+
|
|
80
127
|
box.appendChild(text);
|
|
81
128
|
container.appendChild(box);
|
|
82
129
|
|
|
@@ -84,8 +131,8 @@
|
|
|
84
131
|
const endTime = group[group.length - 1].end;
|
|
85
132
|
|
|
86
133
|
// Hard cut animation (no fades) as requested
|
|
87
|
-
tl.set(box, { display:
|
|
88
|
-
tl.set(box, { display:
|
|
134
|
+
tl.set(box, { display: "flex" }, startTime);
|
|
135
|
+
tl.set(box, { display: "none" }, endTime);
|
|
89
136
|
});
|
|
90
137
|
|
|
91
138
|
window.__timelines["captions"] = tl;
|