hyperframes 0.1.2 → 0.1.5
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/dist/cli.js +6519 -4336
- package/dist/hyperframe-runtime.js +1 -0
- package/dist/hyperframe.manifest.json +22 -0
- package/dist/hyperframe.runtime.iife.js +13 -0
- package/dist/studio/assets/{index-B1830ANq.js → index-B3C3oxF8.js} +8 -8
- package/dist/studio/index.html +1 -1
- package/dist/templates/blank/compositions/captions.html +92 -0
- package/dist/templates/blank/index.html +44 -0
- package/dist/templates/play-mode/compositions/captions.html +7 -1
- package/dist/templates/play-mode/compositions/intro.html +2 -1
- package/dist/templates/play-mode/compositions/stats.html +7 -1
- package/dist/templates/play-mode/index.html +17 -7
- package/dist/templates/swiss-grid/compositions/captions.html +7 -1
- package/dist/templates/swiss-grid/compositions/graphics.html +1 -0
- package/dist/templates/swiss-grid/compositions/intro.html +1 -0
- package/dist/templates/swiss-grid/index.html +21 -10
- package/dist/templates/vignelli/compositions/captions.html +7 -1
- package/dist/templates/vignelli/compositions/overlays.html +1 -0
- package/dist/templates/vignelli/index.html +16 -4
- package/dist/templates/warm-grain/compositions/captions.html +7 -1
- package/dist/templates/warm-grain/compositions/graphics.html +1 -0
- package/dist/templates/warm-grain/compositions/intro.html +1 -0
- package/dist/templates/warm-grain/index.html +19 -6
- package/package.json +4 -3
package/dist/studio/index.html
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
<meta charset="UTF-8" />
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
6
6
|
<title>HyperFrames Studio</title>
|
|
7
|
-
<script type="module" crossorigin src="/assets/index-
|
|
7
|
+
<script type="module" crossorigin src="/assets/index-B3C3oxF8.js"></script>
|
|
8
8
|
<link rel="stylesheet" crossorigin href="/assets/index-KoBceNoU.css">
|
|
9
9
|
</head>
|
|
10
10
|
<body>
|
|
@@ -0,0 +1,92 @@
|
|
|
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="captions-container"></div>
|
|
9
|
+
|
|
10
|
+
<style>
|
|
11
|
+
[data-composition-id="captions"] {
|
|
12
|
+
width: 1920px;
|
|
13
|
+
height: 1080px;
|
|
14
|
+
pointer-events: none;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
[data-composition-id="captions"] #captions-container {
|
|
18
|
+
position: absolute;
|
|
19
|
+
bottom: 100px;
|
|
20
|
+
left: 50%;
|
|
21
|
+
transform: translateX(-50%);
|
|
22
|
+
display: flex;
|
|
23
|
+
justify-content: center;
|
|
24
|
+
align-items: center;
|
|
25
|
+
width: 100%;
|
|
26
|
+
height: 150px;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
.caption-group {
|
|
30
|
+
position: absolute;
|
|
31
|
+
opacity: 0;
|
|
32
|
+
font-family: "Inter", sans-serif;
|
|
33
|
+
font-size: 48px;
|
|
34
|
+
font-weight: 700;
|
|
35
|
+
color: #ffffff;
|
|
36
|
+
text-shadow:
|
|
37
|
+
0 2px 8px rgba(0, 0, 0, 0.8),
|
|
38
|
+
0 0 2px rgba(0, 0, 0, 0.9);
|
|
39
|
+
white-space: nowrap;
|
|
40
|
+
}
|
|
41
|
+
</style>
|
|
42
|
+
|
|
43
|
+
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
|
|
44
|
+
<script>
|
|
45
|
+
(function () {
|
|
46
|
+
window.__timelines = window.__timelines || {};
|
|
47
|
+
const tl = gsap.timeline({ paused: true });
|
|
48
|
+
|
|
49
|
+
const script = [];
|
|
50
|
+
|
|
51
|
+
if (script.length === 0) {
|
|
52
|
+
window.__timelines["captions"] = tl;
|
|
53
|
+
return;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
const container = document.getElementById("captions-container");
|
|
57
|
+
|
|
58
|
+
// Group words into lines (max 5 words per line)
|
|
59
|
+
const lines = [];
|
|
60
|
+
for (let i = 0; i < script.length; i += 5) {
|
|
61
|
+
const lineWords = script.slice(i, i + 5);
|
|
62
|
+
lines.push({
|
|
63
|
+
text: lineWords.map((w) => w.text).join(" "),
|
|
64
|
+
start: lineWords[0].start,
|
|
65
|
+
end: lineWords[lineWords.length - 1].end,
|
|
66
|
+
});
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
lines.forEach((line, index) => {
|
|
70
|
+
const el = document.createElement("div");
|
|
71
|
+
el.className = "caption-group";
|
|
72
|
+
el.textContent = line.text;
|
|
73
|
+
container.appendChild(el);
|
|
74
|
+
|
|
75
|
+
tl.fromTo(
|
|
76
|
+
el,
|
|
77
|
+
{ opacity: 0, y: 20 },
|
|
78
|
+
{ opacity: 1, y: 0, duration: 0.3, ease: "power3.out" },
|
|
79
|
+
line.start,
|
|
80
|
+
);
|
|
81
|
+
|
|
82
|
+
const hideTime =
|
|
83
|
+
index < lines.length - 1 ? Math.min(line.end, lines[index + 1].start) : line.end;
|
|
84
|
+
|
|
85
|
+
tl.to(el, { opacity: 0, y: -10, duration: 0.25, ease: "power2.in" }, hideTime - 0.25);
|
|
86
|
+
});
|
|
87
|
+
|
|
88
|
+
window.__timelines["captions"] = tl;
|
|
89
|
+
})();
|
|
90
|
+
</script>
|
|
91
|
+
</div>
|
|
92
|
+
</template>
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
<div
|
|
2
|
+
id="root"
|
|
3
|
+
data-composition-id="main"
|
|
4
|
+
data-start="0"
|
|
5
|
+
data-duration="__VIDEO_DURATION__"
|
|
6
|
+
data-width="1920"
|
|
7
|
+
data-height="1080"
|
|
8
|
+
>
|
|
9
|
+
<video
|
|
10
|
+
id="a-roll"
|
|
11
|
+
src="__VIDEO_SRC__"
|
|
12
|
+
muted
|
|
13
|
+
playsinline
|
|
14
|
+
data-start="0"
|
|
15
|
+
data-duration="__VIDEO_DURATION__"
|
|
16
|
+
data-track-index="0"
|
|
17
|
+
></video>
|
|
18
|
+
<audio
|
|
19
|
+
id="a-roll-audio"
|
|
20
|
+
src="__VIDEO_SRC__"
|
|
21
|
+
data-start="0"
|
|
22
|
+
data-duration="__VIDEO_DURATION__"
|
|
23
|
+
data-track-index="2"
|
|
24
|
+
data-volume="1"
|
|
25
|
+
></audio>
|
|
26
|
+
|
|
27
|
+
<div
|
|
28
|
+
id="captions-comp"
|
|
29
|
+
data-composition-id="captions"
|
|
30
|
+
data-composition-src="compositions/captions.html"
|
|
31
|
+
data-start="0"
|
|
32
|
+
data-duration="__VIDEO_DURATION__"
|
|
33
|
+
data-track-index="3"
|
|
34
|
+
data-width="1920"
|
|
35
|
+
data-height="1080"
|
|
36
|
+
></div>
|
|
37
|
+
|
|
38
|
+
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
|
|
39
|
+
<script>
|
|
40
|
+
window.__timelines = window.__timelines || {};
|
|
41
|
+
const tl = gsap.timeline({ paused: true });
|
|
42
|
+
window.__timelines["main"] = tl;
|
|
43
|
+
</script>
|
|
44
|
+
</div>
|
|
@@ -1,5 +1,10 @@
|
|
|
1
1
|
<template id="captions-template">
|
|
2
|
-
<div
|
|
2
|
+
<div
|
|
3
|
+
data-composition-id="captions"
|
|
4
|
+
data-width="1920"
|
|
5
|
+
data-height="1080"
|
|
6
|
+
data-duration="__VIDEO_DURATION__"
|
|
7
|
+
>
|
|
3
8
|
<div id="captions-container"></div>
|
|
4
9
|
|
|
5
10
|
<style>
|
|
@@ -150,6 +155,7 @@
|
|
|
150
155
|
);
|
|
151
156
|
});
|
|
152
157
|
|
|
158
|
+
window.__timelines = window.__timelines || {};
|
|
153
159
|
window.__timelines["captions"] = tl;
|
|
154
160
|
})();
|
|
155
161
|
</script>
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
id="intro-comp"
|
|
4
4
|
data-composition-id="intro"
|
|
5
5
|
data-start="0"
|
|
6
|
-
data-duration="
|
|
6
|
+
data-duration="__VIDEO_DURATION__"
|
|
7
7
|
data-width="1920"
|
|
8
8
|
data-height="1080"
|
|
9
9
|
>
|
|
@@ -99,6 +99,7 @@
|
|
|
99
99
|
ease: "elastic.out(1, 0.3)",
|
|
100
100
|
});
|
|
101
101
|
|
|
102
|
+
window.__timelines = window.__timelines || {};
|
|
102
103
|
window.__timelines["intro"] = tl;
|
|
103
104
|
})();
|
|
104
105
|
</script>
|
|
@@ -1,5 +1,10 @@
|
|
|
1
1
|
<template id="stats-template">
|
|
2
|
-
<div
|
|
2
|
+
<div
|
|
3
|
+
data-composition-id="stats"
|
|
4
|
+
data-width="1920"
|
|
5
|
+
data-height="1080"
|
|
6
|
+
data-duration="__VIDEO_DURATION__"
|
|
7
|
+
>
|
|
3
8
|
<div id="stats-container">
|
|
4
9
|
<!-- Moment 1: 47% NEED MOTION GRAPHICS -->
|
|
5
10
|
<div id="moment-1" class="moment" style="opacity: 0; transform: scale(0) rotate(8deg)">
|
|
@@ -375,6 +380,7 @@
|
|
|
375
380
|
}
|
|
376
381
|
});
|
|
377
382
|
|
|
383
|
+
window.__timelines = window.__timelines || {};
|
|
378
384
|
window.__timelines["stats"] = tl;
|
|
379
385
|
})();
|
|
380
386
|
</script>
|
|
@@ -91,7 +91,7 @@
|
|
|
91
91
|
id="main-composition"
|
|
92
92
|
data-composition-id="main-video"
|
|
93
93
|
data-start="0"
|
|
94
|
-
data-duration="
|
|
94
|
+
data-duration="__VIDEO_DURATION__"
|
|
95
95
|
data-width="1920"
|
|
96
96
|
data-height="1080"
|
|
97
97
|
>
|
|
@@ -100,7 +100,7 @@
|
|
|
100
100
|
id="bg-comp"
|
|
101
101
|
data-composition-id="background"
|
|
102
102
|
data-start="0"
|
|
103
|
-
data-duration="
|
|
103
|
+
data-duration="__VIDEO_DURATION__"
|
|
104
104
|
data-width="1920"
|
|
105
105
|
data-height="1080"
|
|
106
106
|
data-track-index="1"
|
|
@@ -134,7 +134,7 @@
|
|
|
134
134
|
id="aroll-comp"
|
|
135
135
|
data-composition-id="aroll-layer"
|
|
136
136
|
data-start="0"
|
|
137
|
-
data-duration="
|
|
137
|
+
data-duration="__VIDEO_DURATION__"
|
|
138
138
|
data-width="1920"
|
|
139
139
|
data-height="1080"
|
|
140
140
|
data-track-index="10"
|
|
@@ -143,12 +143,22 @@
|
|
|
143
143
|
<video
|
|
144
144
|
id="short_mag_cut"
|
|
145
145
|
src="__VIDEO_SRC__"
|
|
146
|
+
muted
|
|
147
|
+
playsinline
|
|
146
148
|
data-start="0"
|
|
147
|
-
data-duration="
|
|
149
|
+
data-duration="__VIDEO_DURATION__"
|
|
148
150
|
data-track-index="1"
|
|
149
151
|
style="width: 100%; height: auto"
|
|
150
152
|
></video>
|
|
151
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>
|
|
152
162
|
<style>
|
|
153
163
|
#aroll-container {
|
|
154
164
|
position: absolute;
|
|
@@ -184,7 +194,7 @@
|
|
|
184
194
|
data-composition-id="intro"
|
|
185
195
|
data-composition-src="compositions/intro.html"
|
|
186
196
|
data-start="0"
|
|
187
|
-
data-duration="
|
|
197
|
+
data-duration="__VIDEO_DURATION__"
|
|
188
198
|
data-width="1920"
|
|
189
199
|
data-height="1080"
|
|
190
200
|
data-track-index="100"
|
|
@@ -194,7 +204,7 @@
|
|
|
194
204
|
data-composition-id="captions"
|
|
195
205
|
data-composition-src="compositions/captions.html"
|
|
196
206
|
data-start="0"
|
|
197
|
-
data-duration="
|
|
207
|
+
data-duration="__VIDEO_DURATION__"
|
|
198
208
|
data-width="1920"
|
|
199
209
|
data-height="1080"
|
|
200
210
|
data-track-index="200"
|
|
@@ -204,7 +214,7 @@
|
|
|
204
214
|
data-composition-id="stats"
|
|
205
215
|
data-composition-src="compositions/stats.html"
|
|
206
216
|
data-start="0"
|
|
207
|
-
data-duration="
|
|
217
|
+
data-duration="__VIDEO_DURATION__"
|
|
208
218
|
data-width="1920"
|
|
209
219
|
data-height="1080"
|
|
210
220
|
data-track-index="150"
|
|
@@ -1,5 +1,10 @@
|
|
|
1
1
|
<template id="captions-template">
|
|
2
|
-
<div
|
|
2
|
+
<div
|
|
3
|
+
data-composition-id="captions"
|
|
4
|
+
data-width="1920"
|
|
5
|
+
data-height="1080"
|
|
6
|
+
data-duration="__VIDEO_DURATION__"
|
|
7
|
+
>
|
|
3
8
|
<div id="caption-container"></div>
|
|
4
9
|
|
|
5
10
|
<style>
|
|
@@ -97,6 +102,7 @@
|
|
|
97
102
|
const tl = gsap.timeline({ paused: true });
|
|
98
103
|
|
|
99
104
|
if (!TRANSCRIPT || TRANSCRIPT.length === 0) {
|
|
105
|
+
window.__timelines = window.__timelines || {};
|
|
100
106
|
window.__timelines["captions"] = tl;
|
|
101
107
|
return;
|
|
102
108
|
}
|
|
@@ -81,7 +81,8 @@
|
|
|
81
81
|
data-composition-id="master"
|
|
82
82
|
data-width="1920"
|
|
83
83
|
data-height="1080"
|
|
84
|
-
data-
|
|
84
|
+
data-start="0"
|
|
85
|
+
data-duration="__VIDEO_DURATION__"
|
|
85
86
|
>
|
|
86
87
|
<!-- Background Grid -->
|
|
87
88
|
<img
|
|
@@ -90,7 +91,7 @@
|
|
|
90
91
|
src="assets/swiss-grid.svg"
|
|
91
92
|
alt="Grid"
|
|
92
93
|
data-start="0"
|
|
93
|
-
data-duration="
|
|
94
|
+
data-duration="__VIDEO_DURATION__"
|
|
94
95
|
data-track-index="0"
|
|
95
96
|
/>
|
|
96
97
|
|
|
@@ -99,11 +100,21 @@
|
|
|
99
100
|
<video
|
|
100
101
|
id="short_mag_cut"
|
|
101
102
|
src="__VIDEO_SRC__"
|
|
103
|
+
muted
|
|
104
|
+
playsinline
|
|
102
105
|
data-start="0"
|
|
103
|
-
data-duration="
|
|
106
|
+
data-duration="__VIDEO_DURATION__"
|
|
104
107
|
data-track-index="1"
|
|
105
108
|
></video>
|
|
106
109
|
</div>
|
|
110
|
+
<audio
|
|
111
|
+
id="a-roll-audio"
|
|
112
|
+
src="__VIDEO_SRC__"
|
|
113
|
+
data-start="0"
|
|
114
|
+
data-duration="__VIDEO_DURATION__"
|
|
115
|
+
data-track-index="5"
|
|
116
|
+
data-volume="1"
|
|
117
|
+
></audio>
|
|
107
118
|
|
|
108
119
|
<!-- Intro Sub-composition -->
|
|
109
120
|
<div
|
|
@@ -123,7 +134,7 @@
|
|
|
123
134
|
data-composition-id="graphics"
|
|
124
135
|
data-composition-src="compositions/graphics.html"
|
|
125
136
|
data-start="0"
|
|
126
|
-
data-duration="
|
|
137
|
+
data-duration="__VIDEO_DURATION__"
|
|
127
138
|
data-track-index="3"
|
|
128
139
|
></div>
|
|
129
140
|
|
|
@@ -134,15 +145,15 @@
|
|
|
134
145
|
data-composition-id="captions"
|
|
135
146
|
data-composition-src="compositions/captions.html"
|
|
136
147
|
data-start="0"
|
|
137
|
-
data-duration="
|
|
148
|
+
data-duration="__VIDEO_DURATION__"
|
|
138
149
|
data-track-index="4"
|
|
139
150
|
></div>
|
|
140
151
|
|
|
141
|
-
<!-- Sound Effects -->
|
|
142
|
-
<audio id="sfx-intro" data-start="0" data-track-index="5" data-duration="1"
|
|
143
|
-
<audio id="sfx-stat1" data-start="1.86" data-track-index="5" data-duration="1"
|
|
144
|
-
<audio id="sfx-stat2" data-start="4.68" data-track-index="5" data-duration="1"
|
|
145
|
-
<audio id="sfx-stat3" data-start="8.88" data-track-index="5" data-duration="1"
|
|
152
|
+
<!-- Sound Effects (src set dynamically; omitted to avoid 404s) -->
|
|
153
|
+
<audio id="sfx-intro" data-start="0" data-track-index="5" data-duration="1"></audio>
|
|
154
|
+
<audio id="sfx-stat1" data-start="1.86" data-track-index="5" data-duration="1"></audio>
|
|
155
|
+
<audio id="sfx-stat2" data-start="4.68" data-track-index="5" data-duration="1"></audio>
|
|
156
|
+
<audio id="sfx-stat3" data-start="8.88" data-track-index="5" data-duration="1"></audio>
|
|
146
157
|
|
|
147
158
|
<script>
|
|
148
159
|
window.__timelines = window.__timelines || {};
|
|
@@ -1,5 +1,10 @@
|
|
|
1
1
|
<template id="captions-template">
|
|
2
|
-
<div
|
|
2
|
+
<div
|
|
3
|
+
data-composition-id="captions"
|
|
4
|
+
data-width="1080"
|
|
5
|
+
data-height="1920"
|
|
6
|
+
data-duration="__VIDEO_DURATION__"
|
|
7
|
+
>
|
|
3
8
|
<div id="captions-container"></div>
|
|
4
9
|
|
|
5
10
|
<style>
|
|
@@ -168,6 +173,7 @@
|
|
|
168
173
|
);
|
|
169
174
|
});
|
|
170
175
|
|
|
176
|
+
window.__timelines = window.__timelines || {};
|
|
171
177
|
window.__timelines["captions"] = tl;
|
|
172
178
|
})();
|
|
173
179
|
</script>
|
|
@@ -105,18 +105,29 @@
|
|
|
105
105
|
data-composition-id="main-comp"
|
|
106
106
|
data-width="1080"
|
|
107
107
|
data-height="1920"
|
|
108
|
-
data-
|
|
108
|
+
data-start="0"
|
|
109
|
+
data-duration="__VIDEO_DURATION__"
|
|
109
110
|
>
|
|
110
111
|
<!-- A-Roll -->
|
|
111
112
|
<div id="a-roll-wrapper">
|
|
112
113
|
<video
|
|
113
114
|
id="a-roll"
|
|
114
115
|
src="__VIDEO_SRC__"
|
|
116
|
+
muted
|
|
117
|
+
playsinline
|
|
115
118
|
data-start="0"
|
|
116
|
-
data-duration="
|
|
119
|
+
data-duration="__VIDEO_DURATION__"
|
|
117
120
|
data-track-index="0"
|
|
118
121
|
></video>
|
|
119
122
|
</div>
|
|
123
|
+
<audio
|
|
124
|
+
id="a-roll-audio"
|
|
125
|
+
src="__VIDEO_SRC__"
|
|
126
|
+
data-start="0"
|
|
127
|
+
data-duration="__VIDEO_DURATION__"
|
|
128
|
+
data-track-index="5"
|
|
129
|
+
data-volume="1"
|
|
130
|
+
></audio>
|
|
120
131
|
|
|
121
132
|
<!-- Transitions -->
|
|
122
133
|
<div id="curtain-black" class="curtain"></div>
|
|
@@ -128,7 +139,7 @@
|
|
|
128
139
|
data-composition-id="overlays"
|
|
129
140
|
data-composition-src="compositions/overlays.html"
|
|
130
141
|
data-start="0"
|
|
131
|
-
data-duration="
|
|
142
|
+
data-duration="__VIDEO_DURATION__"
|
|
132
143
|
data-track-index="2"
|
|
133
144
|
></div>
|
|
134
145
|
|
|
@@ -138,7 +149,7 @@
|
|
|
138
149
|
data-composition-id="captions"
|
|
139
150
|
data-composition-src="compositions/captions.html"
|
|
140
151
|
data-start="0"
|
|
141
|
-
data-duration="
|
|
152
|
+
data-duration="__VIDEO_DURATION__"
|
|
142
153
|
data-track-index="3"
|
|
143
154
|
></div>
|
|
144
155
|
|
|
@@ -171,6 +182,7 @@
|
|
|
171
182
|
tl.to("#a-roll-wrapper", { opacity: 1, duration: 0 }, 7.3);
|
|
172
183
|
tl.to("#curtain-red", { left: "100%", duration: 0.4, ease: "power2.inOut" }, 7.3);
|
|
173
184
|
|
|
185
|
+
window.__timelines = window.__timelines || {};
|
|
174
186
|
window.__timelines["main-comp"] = tl;
|
|
175
187
|
</script>
|
|
176
188
|
</div>
|
|
@@ -1,5 +1,10 @@
|
|
|
1
1
|
<template id="captions-template">
|
|
2
|
-
<div
|
|
2
|
+
<div
|
|
3
|
+
data-composition-id="captions"
|
|
4
|
+
data-width="1920"
|
|
5
|
+
data-height="1080"
|
|
6
|
+
data-duration="__VIDEO_DURATION__"
|
|
7
|
+
>
|
|
3
8
|
<div class="captions-container">
|
|
4
9
|
<div id="caption-box" class="caption-box">
|
|
5
10
|
<span id="caption-text" class="caption-text"></span>
|
|
@@ -134,6 +139,7 @@
|
|
|
134
139
|
);
|
|
135
140
|
});
|
|
136
141
|
|
|
142
|
+
window.__timelines = window.__timelines || {};
|
|
137
143
|
window.__timelines["captions"] = tl;
|
|
138
144
|
})();
|
|
139
145
|
</script>
|
|
@@ -104,7 +104,8 @@
|
|
|
104
104
|
data-composition-id="main-video"
|
|
105
105
|
data-width="1920"
|
|
106
106
|
data-height="1080"
|
|
107
|
-
data-
|
|
107
|
+
data-start="0"
|
|
108
|
+
data-duration="__VIDEO_DURATION__"
|
|
108
109
|
>
|
|
109
110
|
<!-- Background Layer -->
|
|
110
111
|
<div
|
|
@@ -112,24 +113,36 @@
|
|
|
112
113
|
data-composition-id="grain-overlay"
|
|
113
114
|
data-width="1920"
|
|
114
115
|
data-height="1080"
|
|
115
|
-
data-
|
|
116
|
+
data-start="0"
|
|
117
|
+
data-duration="__VIDEO_DURATION__"
|
|
116
118
|
data-track-index="100"
|
|
117
119
|
>
|
|
118
120
|
<div class="grain-texture"></div>
|
|
119
121
|
<script>
|
|
120
122
|
const grainTl = gsap.timeline({ paused: true });
|
|
123
|
+
window.__timelines = window.__timelines || {};
|
|
121
124
|
window.__timelines["grain-overlay"] = grainTl;
|
|
122
125
|
</script>
|
|
123
126
|
</div>
|
|
124
127
|
|
|
125
|
-
<!-- A-Roll Video -->
|
|
128
|
+
<!-- A-Roll Video (muted — audio is separate) -->
|
|
126
129
|
<video
|
|
127
130
|
id="a-roll"
|
|
128
131
|
src="__VIDEO_SRC__"
|
|
132
|
+
muted
|
|
133
|
+
playsinline
|
|
129
134
|
data-start="0"
|
|
130
|
-
data-duration="
|
|
135
|
+
data-duration="__VIDEO_DURATION__"
|
|
131
136
|
data-track-index="0"
|
|
132
137
|
></video>
|
|
138
|
+
<audio
|
|
139
|
+
id="a-roll-audio"
|
|
140
|
+
src="__VIDEO_SRC__"
|
|
141
|
+
data-start="0"
|
|
142
|
+
data-duration="__VIDEO_DURATION__"
|
|
143
|
+
data-track-index="5"
|
|
144
|
+
data-volume="1"
|
|
145
|
+
></audio>
|
|
133
146
|
|
|
134
147
|
<!-- Compositions -->
|
|
135
148
|
<div
|
|
@@ -148,7 +161,7 @@
|
|
|
148
161
|
data-composition-id="graphics"
|
|
149
162
|
data-composition-src="compositions/graphics.html"
|
|
150
163
|
data-start="0"
|
|
151
|
-
data-duration="
|
|
164
|
+
data-duration="__VIDEO_DURATION__"
|
|
152
165
|
data-track-index="2"
|
|
153
166
|
></div>
|
|
154
167
|
|
|
@@ -158,7 +171,7 @@
|
|
|
158
171
|
data-composition-id="captions"
|
|
159
172
|
data-composition-src="compositions/captions.html"
|
|
160
173
|
data-start="0"
|
|
161
|
-
data-duration="
|
|
174
|
+
data-duration="__VIDEO_DURATION__"
|
|
162
175
|
data-track-index="3"
|
|
163
176
|
></div>
|
|
164
177
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "hyperframes",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.5",
|
|
4
4
|
"description": "HyperFrames CLI — create, preview, and render HTML video compositions",
|
|
5
5
|
"bin": {
|
|
6
6
|
"hyperframes": "./dist/cli.js"
|
|
@@ -11,10 +11,11 @@
|
|
|
11
11
|
"type": "module",
|
|
12
12
|
"scripts": {
|
|
13
13
|
"dev": "tsx src/cli.ts",
|
|
14
|
-
"build": "bun run build:studio && tsup && bun run build:runtime && bun run build:copy",
|
|
14
|
+
"build": "bun run build:fonts && bun run build:studio && tsup && bun run build:runtime && bun run build:copy",
|
|
15
|
+
"build:fonts": "cd ../producer && tsx scripts/generate-font-data.ts",
|
|
15
16
|
"build:studio": "cd ../studio && bun run build",
|
|
16
17
|
"build:runtime": "tsx scripts/build-runtime.ts",
|
|
17
|
-
"build:copy": "mkdir -p dist/studio dist/docs dist/templates && cp -r ../studio/dist/* dist/studio/ && cp -r src/templates/warm-grain src/templates/play-mode src/templates/swiss-grid src/templates/vignelli dist/templates/ && (cp src/docs/*.md dist/docs/ 2>/dev/null || true)",
|
|
18
|
+
"build:copy": "mkdir -p dist/studio dist/docs dist/templates && cp -r ../studio/dist/* dist/studio/ && cp -r src/templates/blank src/templates/warm-grain src/templates/play-mode src/templates/swiss-grid src/templates/vignelli dist/templates/ && (cp src/docs/*.md dist/docs/ 2>/dev/null || true)",
|
|
18
19
|
"typecheck": "tsc --noEmit"
|
|
19
20
|
},
|
|
20
21
|
"dependencies": {
|