hyperframes 0.1.14 → 0.2.0-alpha.1

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.
Files changed (27) hide show
  1. package/README.md +3 -3
  2. package/dist/cli.js +3968 -3297
  3. package/dist/skills/hyperframes-captions/SKILL.md +2 -2
  4. package/dist/skills/hyperframes-compose/SKILL.md +1 -0
  5. package/dist/studio/assets/index-Bkp9HQbo.css +1 -0
  6. package/dist/studio/assets/index-DfhSlTti.js +93 -0
  7. package/dist/studio/index.html +2 -2
  8. package/dist/templates/_shared/CLAUDE.md +1 -1
  9. package/package.json +3 -2
  10. package/dist/studio/assets/index-CLmYRLY-.css +0 -1
  11. package/dist/studio/assets/index-CRvFpc0E.js +0 -84
  12. package/dist/templates/play-mode/compositions/captions.html +0 -163
  13. package/dist/templates/play-mode/compositions/intro.html +0 -107
  14. package/dist/templates/play-mode/compositions/stats.html +0 -388
  15. package/dist/templates/play-mode/index.html +0 -239
  16. package/dist/templates/swiss-grid/assets/swiss-grid.svg +0 -116
  17. package/dist/templates/swiss-grid/compositions/captions.html +0 -148
  18. package/dist/templates/swiss-grid/compositions/graphics.html +0 -207
  19. package/dist/templates/swiss-grid/compositions/intro.html +0 -131
  20. package/dist/templates/swiss-grid/index.html +0 -234
  21. package/dist/templates/vignelli/compositions/captions.html +0 -181
  22. package/dist/templates/vignelli/compositions/overlays.html +0 -323
  23. package/dist/templates/vignelli/index.html +0 -190
  24. package/dist/templates/warm-grain/compositions/captions.html +0 -147
  25. package/dist/templates/warm-grain/compositions/graphics.html +0 -164
  26. package/dist/templates/warm-grain/compositions/intro.html +0 -86
  27. package/dist/templates/warm-grain/index.html +0 -294
package/dist/templates/play-mode/index.html DELETED
@@ -1,239 +0,0 @@
1
- <!doctype html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8" />
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
- <title>Hyperframes - Play Mode</title>
7
- <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
8
- <style>
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
- }
19
-
20
- #main-composition {
21
- width: 1920px;
22
- height: 1080px;
23
- position: relative;
24
- }
25
-
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
- }
37
-
38
- #bg-comp {
39
- z-index: 1;
40
- }
41
-
42
- #aroll-comp {
43
- z-index: 10;
44
- }
45
-
46
- #intro-comp {
47
- z-index: 100;
48
- }
49
-
50
- #stats-comp {
51
- z-index: 150;
52
- }
53
-
54
- #captions-comp {
55
- z-index: 200;
56
- }
57
-
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
- }
67
-
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
- }
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="__VIDEO_DURATION__"
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="__VIDEO_DURATION__"
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 {
111
- position: absolute;
112
- top: 0;
113
- left: 0;
114
- width: 100%;
115
- height: 100%;
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>
131
-
132
- <!-- A-roll Layer Composition -->
133
- <div
134
- id="aroll-comp"
135
- data-composition-id="aroll-layer"
136
- data-start="0"
137
- data-duration="__VIDEO_DURATION__"
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
- muted
147
- playsinline
148
- data-start="0"
149
- data-duration="__VIDEO_DURATION__"
150
- data-track-index="1"
151
- style="width: 100%; height: auto"
152
- ></video>
153
- </div>
154
- <audio
155
- id="a-roll-audio"
156
- src="__VIDEO_SRC__"
157
- data-start="0"
158
- data-duration="__VIDEO_DURATION__"
159
- data-track-index="5"
160
- data-volume="1"
161
- ></audio>
162
- <style>
163
- #aroll-container {
164
- position: absolute;
165
- width: 100%;
166
- height: 100%;
167
- display: flex;
168
- justify-content: center;
169
- align-items: center;
170
- }
171
- #short_mag_cut {
172
- border-radius: 16px;
173
- box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
174
- border: 8px solid #ffffff;
175
- }
176
- </style>
177
- <script>
178
- (function () {
179
- const tl = gsap.timeline({ paused: true });
180
- const container = document.getElementById("aroll-container");
181
- gsap.set(container, { y: -1100, scale: 0.8 });
182
- tl.to(container, { y: 0, duration: 1.2, ease: "elastic.out(1, 0.6)" }, 0);
183
- tl.to(container, { scale: 1.4, x: -300, duration: 1, ease: "back.out(1.7)" }, 1.839);
184
- tl.to(container, { scale: 0.7, x: 400, duration: 1, ease: "back.out(1.7)" }, 4.659);
185
- tl.to(container, { scale: 0.9, x: 0, duration: 1, ease: "back.out(1.7)" }, 8.88);
186
- window.__timelines["aroll-layer"] = tl;
187
- })();
188
- </script>
189
- </div>
190
-
191
- <!-- Compositions -->
192
- <div
193
- id="intro-comp"
194
- data-composition-id="intro"
195
- data-composition-src="compositions/intro.html"
196
- data-start="0"
197
- data-duration="__VIDEO_DURATION__"
198
- data-width="1920"
199
- data-height="1080"
200
- data-track-index="100"
201
- ></div>
202
- <div
203
- id="captions-comp"
204
- data-composition-id="captions"
205
- data-composition-src="compositions/captions.html"
206
- data-start="0"
207
- data-duration="__VIDEO_DURATION__"
208
- data-width="1920"
209
- data-height="1080"
210
- data-track-index="200"
211
- ></div>
212
- <div
213
- id="stats-comp"
214
- data-composition-id="stats"
215
- data-composition-src="compositions/stats.html"
216
- data-start="0"
217
- data-duration="__VIDEO_DURATION__"
218
- data-width="1920"
219
- data-height="1080"
220
- data-track-index="150"
221
- ></div>
222
-
223
- <!-- Audio Clips -->
224
- <audio id="sfx-bounce-0" src="" data-start="0" data-track-index="5"></audio>
225
- <audio id="sfx-whoosh-1" src="" data-start="1.839" data-track-index="6"></audio>
226
- <audio id="sfx-pop-1" src="" data-start="2.039" data-track-index="7"></audio>
227
- <audio id="sfx-whoosh-2" src="" data-start="4.659" data-track-index="6"></audio>
228
- <audio id="sfx-pop-2" src="" data-start="4.859" data-track-index="7"></audio>
229
- <audio id="sfx-whoosh-3" src="" data-start="8.88" data-track-index="6"></audio>
230
- <audio id="sfx-pop-3" src="" data-start="9.08" data-track-index="7"></audio>
231
-
232
- <script>
233
- window.__timelines = window.__timelines || {};
234
- const tl = gsap.timeline({ paused: true });
235
- window.__timelines["main-video"] = tl;
236
- </script>
237
- </div>
238
- </body>
239
- </html>
package/dist/templates/swiss-grid/assets/swiss-grid.svg DELETED
@@ -1,116 +0,0 @@
1
- <svg viewBox="0 0 1920 1080" xmlns="http://www.w3.org/2000/svg">
2
- <rect width="1920" height="1080" fill="#F2F2F2" />
3
-
4
- <g id="thin-grid-lines" stroke="#0A1E3D" stroke-width="1" opacity="0.1">
5
- <line id="v-thin-1" x1="60" y1="0" x2="60" y2="1080" />
6
- <line id="v-thin-2" x1="120" y1="0" x2="120" y2="1080" />
7
- <line id="v-thin-3" x1="180" y1="0" x2="180" y2="1080" />
8
- <line id="v-thin-5" x1="300" y1="0" x2="300" y2="1080" />
9
- <line id="v-thin-6" x1="360" y1="0" x2="360" y2="1080" />
10
- <line id="v-thin-7" x1="420" y1="0" x2="420" y2="1080" />
11
- <line id="v-thin-9" x1="540" y1="0" x2="540" y2="1080" />
12
- <line id="v-thin-10" x1="600" y1="0" x2="600" y2="1080" />
13
- <line id="v-thin-11" x1="660" y1="0" x2="660" y2="1080" />
14
- <line id="v-thin-13" x1="780" y1="0" x2="780" y2="1080" />
15
- <line id="v-thin-14" x1="840" y1="0" x2="840" y2="1080" />
16
- <line id="v-thin-15" x1="900" y1="0" x2="900" y2="1080" />
17
- <line id="v-thin-17" x1="1020" y1="0" x2="1020" y2="1080" />
18
- <line id="v-thin-18" x1="1080" y1="0" x2="1080" y2="1080" />
19
- <line id="v-thin-19" x1="1140" y1="0" x2="1140" y2="1080" />
20
- <line id="v-thin-21" x1="1260" y1="0" x2="1260" y2="1080" />
21
- <line id="v-thin-22" x1="1320" y1="0" x2="1320" y2="1080" />
22
- <line id="v-thin-23" x1="1380" y1="0" x2="1380" y2="1080" />
23
- <line id="v-thin-25" x1="1500" y1="0" x2="1500" y2="1080" />
24
- <line id="v-thin-26" x1="1560" y1="0" x2="1560" y2="1080" />
25
- <line id="v-thin-27" x1="1620" y1="0" x2="1620" y2="1080" />
26
- <line id="v-thin-29" x1="1740" y1="0" x2="1740" y2="1080" />
27
- <line id="v-thin-30" x1="1800" y1="0" x2="1800" y2="1080" />
28
- <line id="v-thin-31" x1="1860" y1="0" x2="1860" y2="1080" />
29
- <line id="h-thin-1" x1="0" y1="60" x2="1920" y2="60" />
30
- <line id="h-thin-2" x1="0" y1="120" x2="1920" y2="120" />
31
- <line id="h-thin-3" x1="0" y1="180" x2="1920" y2="180" />
32
- <line id="h-thin-5" x1="0" y1="300" x2="1920" y2="300" />
33
- <line id="h-thin-6" x1="0" y1="360" x2="1920" y2="360" />
34
- <line id="h-thin-7" x1="0" y1="420" x2="1920" y2="420" />
35
- <line id="h-thin-9" x1="0" y1="540" x2="1920" y2="540" />
36
- <line id="h-thin-10" x1="0" y1="600" x2="1920" y2="600" />
37
- <line id="h-thin-11" x1="0" y1="660" x2="1920" y2="660" />
38
- <line id="h-thin-13" x1="0" y1="780" x2="1920" y2="780" />
39
- <line id="h-thin-14" x1="0" y1="840" x2="1920" y2="840" />
40
- <line id="h-thin-15" x1="0" y1="900" x2="1920" y2="900" />
41
- <line id="h-thin-17" x1="0" y1="1020" x2="1920" y2="1020" />
42
- </g>
43
-
44
- <g id="thick-grid-lines" stroke="#0A1E3D" stroke-width="3" opacity="0.2">
45
- <line id="v-thick-1" x1="240" y1="0" x2="240" y2="1080" />
46
- <line id="v-thick-2" x1="480" y1="0" x2="480" y2="1080" />
47
- <line id="v-thick-3" x1="720" y1="0" x2="720" y2="1080" />
48
- <line id="v-thick-4" x1="960" y1="0" x2="960" y2="1080" />
49
- <line id="v-thick-5" x1="1200" y1="0" x2="1200" y2="1080" />
50
- <line id="v-thick-6" x1="1440" y1="0" x2="1440" y2="1080" />
51
- <line id="v-thick-7" x1="1680" y1="0" x2="1680" y2="1080" />
52
- <line id="h-thick-1" x1="0" y1="240" x2="1920" y2="240" />
53
- <line id="h-thick-2" x1="0" y1="480" x2="1920" y2="480" />
54
- <line id="h-thick-3" x1="0" y1="720" x2="1920" y2="720" />
55
- <line id="h-thick-4" x1="0" y1="960" x2="1920" y2="960" />
56
- </g>
57
-
58
- <g id="intersections" stroke="#0A1E3D" stroke-width="2" opacity="0.3">
59
- <line x1="230" y1="240" x2="250" y2="240" />
60
- <line x1="240" y1="230" x2="240" y2="250" />
61
- <line x1="230" y1="480" x2="250" y2="480" />
62
- <line x1="240" y1="470" x2="240" y2="490" />
63
- <line x1="230" y1="720" x2="250" y2="720" />
64
- <line x1="240" y1="710" x2="240" y2="730" />
65
- <line x1="230" y1="960" x2="250" y2="960" />
66
- <line x1="240" y1="950" x2="240" y2="970" />
67
- <line x1="470" y1="240" x2="490" y2="240" />
68
- <line x1="480" y1="230" x2="480" y2="250" />
69
- <line x1="470" y1="480" x2="490" y2="480" />
70
- <line x1="480" y1="470" x2="480" y2="490" />
71
- <line x1="470" y1="720" x2="490" y2="720" />
72
- <line x1="480" y1="710" x2="480" y2="730" />
73
- <line x1="470" y1="960" x2="490" y2="960" />
74
- <line x1="480" y1="950" x2="480" y2="970" />
75
- <line x1="710" y1="240" x2="730" y2="240" />
76
- <line x1="720" y1="230" x2="720" y2="250" />
77
- <line x1="710" y1="480" x2="730" y2="480" />
78
- <line x1="720" y1="470" x2="720" y2="490" />
79
- <line x1="710" y1="720" x2="730" y2="720" />
80
- <line x1="720" y1="710" x2="720" y2="730" />
81
- <line x1="710" y1="960" x2="730" y2="960" />
82
- <line x1="720" y1="950" x2="720" y2="970" />
83
- <line x1="950" y1="240" x2="970" y2="240" />
84
- <line x1="960" y1="230" x2="960" y2="250" />
85
- <line x1="950" y1="480" x2="970" y2="480" />
86
- <line x1="960" y1="470" x2="960" y2="490" />
87
- <line x1="950" y1="720" x2="970" y2="720" />
88
- <line x1="960" y1="710" x2="960" y2="730" />
89
- <line x1="950" y1="960" x2="970" y2="960" />
90
- <line x1="960" y1="950" x2="960" y2="970" />
91
- <line x1="1190" y1="240" x2="1210" y2="240" />
92
- <line x1="1200" y1="230" x2="1200" y2="250" />
93
- <line x1="1190" y1="480" x2="1210" y2="480" />
94
- <line x1="1200" y1="470" x2="1200" y2="490" />
95
- <line x1="1190" y1="720" x2="1210" y2="720" />
96
- <line x1="1200" y1="710" x2="1200" y2="730" />
97
- <line x1="1190" y1="960" x2="1210" y2="960" />
98
- <line x1="1200" y1="950" x2="1200" y2="970" />
99
- <line x1="1430" y1="240" x2="1450" y2="240" />
100
- <line x1="1440" y1="230" x2="1440" y2="250" />
101
- <line x1="1430" y1="480" x2="1450" y2="480" />
102
- <line x1="1440" y1="470" x2="1440" y2="490" />
103
- <line x1="1430" y1="720" x2="1450" y2="720" />
104
- <line x1="1440" y1="710" x2="1440" y2="730" />
105
- <line x1="1430" y1="960" x2="1450" y2="960" />
106
- <line x1="1440" y1="950" x2="1440" y2="970" />
107
- <line x1="1670" y1="240" x2="1690" y2="240" />
108
- <line x1="1680" y1="230" x2="1680" y2="250" />
109
- <line x1="1670" y1="480" x2="1690" y2="480" />
110
- <line x1="1680" y1="470" x2="1680" y2="490" />
111
- <line x1="1670" y1="720" x2="1690" y2="720" />
112
- <line x1="1680" y1="710" x2="1680" y2="730" />
113
- <line x1="1670" y1="960" x2="1690" y2="960" />
114
- <line x1="1680" y1="950" x2="1680" y2="970" />
115
- </g>
116
- </svg>
package/dist/templates/swiss-grid/compositions/captions.html DELETED
@@ -1,148 +0,0 @@
1
- <template id="captions-template">
2
- <div
3
- data-composition-id="captions"
4
- data-width="1920"
5
- data-height="1080"
6
- data-duration="__VIDEO_DURATION__"
7
- >
8
- <div id="caption-container"></div>
9
-
10
- <style>
11
- [data-composition-id="captions"] {
12
- width: 1920px;
13
- height: 1080px;
14
- position: relative;
15
- font-family: "Helvetica", "Arial", sans-serif;
16
- font-weight: bold;
17
- overflow: hidden;
18
- }
19
-
20
- [data-composition-id="captions"] #caption-container {
21
- position: absolute;
22
- bottom: 120px; /* Consistent bottom positioning */
23
- left: 50%;
24
- transform: translateX(-50%);
25
- display: flex;
26
- justify-content: center;
27
- align-items: center;
28
- width: 100%;
29
- }
30
-
31
- [data-composition-id="captions"] .caption-box {
32
- background-color: #0a1e3d; /* Solid navy */
33
- padding: 20px 40px;
34
- display: none; /* Hidden by default, shown via GSAP */
35
- justify-content: center;
36
- align-items: center;
37
- /* Swiss Grid: sharp corners, solid block */
38
- }
39
-
40
- [data-composition-id="captions"] .caption-text {
41
- color: #f2f2f2; /* Off-white */
42
- font-size: 72px;
43
- text-transform: uppercase; /* Swiss style often uses uppercase for impact */
44
- letter-spacing: -2px;
45
- line-height: 1;
46
- white-space: nowrap;
47
- text-align: center;
48
- }
49
- </style>
50
-
51
- <script>
52
- (function () {
53
- const TRANSCRIPT = [
54
- { text: "We", start: 0.119, end: 0.259 },
55
- { text: "asked", start: 0.319, end: 0.479 },
56
- { text: "what", start: 0.519, end: 0.659 },
57
- { text: "you", start: 0.699, end: 0.819 },
58
- { text: "needed.", start: 0.859, end: 1.819 },
59
- { text: "Forty-seven", start: 1.86, end: 2.299 },
60
- { text: "percent", start: 2.399, end: 2.679 },
61
- { text: "of", start: 2.7, end: 2.799 },
62
- { text: "you", start: 2.839, end: 2.939 },
63
- { text: "said", start: 3.039, end: 3.179 },
64
- { text: "motion", start: 3.24, end: 3.559 },
65
- { text: "graphics,", start: 3.579, end: 4.599 },
66
- { text: "sixty-two", start: 4.679, end: 5.179 },
67
- { text: "percent", start: 5.299, end: 5.759 },
68
- { text: "said", start: 5.859, end: 5.98 },
69
- { text: "static", start: 6.079, end: 6.399 },
70
- { text: "content", start: 6.46, end: 6.879 },
71
- { text: "was", start: 6.92, end: 7.079 },
72
- { text: "costing", start: 7.099, end: 7.48 },
73
- { text: "you", start: 7.5, end: 7.579 },
74
- { text: "attention,", start: 7.679, end: 8.659 },
75
- { text: "and", start: 8.699, end: 8.86 },
76
- { text: "three", start: 8.88, end: 9.06 },
77
- { text: "out", start: 9.079, end: 9.18 },
78
- { text: "of", start: 9.199, end: 9.34 },
79
- { text: "four", start: 9.38, end: 9.799 },
80
- { text: "said", start: 9.84, end: 10.0 },
81
- { text: "you", start: 10.019, end: 10.159 },
82
- { text: "know", start: 10.179, end: 10.36 },
83
- { text: "the", start: 10.38, end: 10.42 },
84
- { text: "look", start: 10.519, end: 10.699 },
85
- { text: "you", start: 10.739, end: 10.859 },
86
- { text: "want", start: 10.98, end: 11.34 },
87
- { text: "but", start: 11.359, end: 11.52 },
88
- { text: "don't", start: 11.56, end: 11.779 },
89
- { text: "have", start: 11.819, end: 11.94 },
90
- { text: "the", start: 11.96, end: 12.06 },
91
- { text: "editing", start: 12.079, end: 12.4 },
92
- { text: "skills", start: 12.52, end: 12.86 },
93
- { text: "to", start: 12.88, end: 13.0 },
94
- { text: "get", start: 13.019, end: 13.18 },
95
- { text: "there.", start: 13.22, end: 14.22 },
96
- { text: "So", start: 14.239, end: 14.399 },
97
- { text: "we", start: 14.42, end: 14.52 },
98
- { text: "built", start: 14.619, end: 14.88 },
99
- { text: "Hyperframes", start: 15.079, end: 15.42 },
100
- ];
101
- const container = document.getElementById("caption-container");
102
- const tl = gsap.timeline({ paused: true });
103
-
104
- if (!TRANSCRIPT || TRANSCRIPT.length === 0) {
105
- window.__timelines = window.__timelines || {};
106
- window.__timelines["captions"] = tl;
107
- return;
108
- }
109
-
110
- // Group transcript into max 5 words per group
111
- const groups = [];
112
- let currentGroup = [];
113
-
114
- TRANSCRIPT.forEach((word, index) => {
115
- currentGroup.push(word);
116
- // Group by 5 words OR if it's the last word
117
- if (currentGroup.length === 5 || index === TRANSCRIPT.length - 1) {
118
- groups.push([...currentGroup]);
119
- currentGroup = [];
120
- }
121
- });
122
-
123
- // Create DOM elements and timeline for each group
124
- groups.forEach((group, i) => {
125
- const box = document.createElement("div");
126
- box.className = "caption-box";
127
- box.id = `group-${i}`;
128
-
129
- const text = document.createElement("div");
130
- text.className = "caption-text";
131
- text.textContent = group.map((w) => w.text).join(" ");
132
-
133
- box.appendChild(text);
134
- container.appendChild(box);
135
-
136
- const startTime = group[0].start;
137
- const endTime = group[group.length - 1].end;
138
-
139
- // Hard cut animation (no fades) as requested
140
- tl.set(box, { display: "flex" }, startTime);
141
- tl.set(box, { display: "none" }, endTime);
142
- });
143
-
144
- window.__timelines["captions"] = tl;
145
- })();
146
- </script>
147
- </div>
148
- </template>