hyperframes 0.1.1 → 0.1.4
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 +2755 -1167
- 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 +4 -3
- package/dist/hyperframe.manifest.json +22 -0
- package/dist/hyperframe.runtime.iife.js +13 -0
- package/dist/studio/index.html +11 -11
- 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 +96 -30
- package/dist/templates/play-mode/compositions/intro.html +90 -71
- package/dist/templates/play-mode/compositions/stats.html +210 -74
- package/dist/templates/play-mode/index.html +214 -148
- package/dist/templates/swiss-grid/compositions/captions.html +70 -17
- package/dist/templates/swiss-grid/compositions/graphics.html +52 -43
- package/dist/templates/swiss-grid/compositions/intro.html +42 -25
- package/dist/templates/swiss-grid/index.html +227 -165
- package/dist/templates/vignelli/compositions/captions.html +87 -28
- package/dist/templates/vignelli/compositions/overlays.html +83 -31
- package/dist/templates/vignelli/index.html +183 -164
- package/dist/templates/warm-grain/compositions/captions.html +80 -66
- package/dist/templates/warm-grain/compositions/graphics.html +29 -22
- package/dist/templates/warm-grain/compositions/intro.html +29 -20
- package/dist/templates/warm-grain/index.html +278 -179
- package/package.json +16 -15
- package/LICENSE +0 -21
|
@@ -1,8 +1,13 @@
|
|
|
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
|
-
<div id="moment-1" class="moment" style="opacity: 0; transform: scale(0) rotate(8deg)
|
|
10
|
+
<div id="moment-1" class="moment" style="opacity: 0; transform: scale(0) rotate(8deg)">
|
|
6
11
|
<div class="sticker-stack">
|
|
7
12
|
<div class="sticker-bg blue-bg"></div>
|
|
8
13
|
<div class="sticker-content white-bg blue-border">
|
|
@@ -11,12 +16,18 @@
|
|
|
11
16
|
</div>
|
|
12
17
|
</div>
|
|
13
18
|
<!-- Decorative shapes -->
|
|
14
|
-
<div
|
|
15
|
-
|
|
19
|
+
<div
|
|
20
|
+
class="shape circle pink-bg"
|
|
21
|
+
style="top: -40px; left: -40px; width: 80px; height: 80px"
|
|
22
|
+
></div>
|
|
23
|
+
<div
|
|
24
|
+
class="shape pill lime-bg"
|
|
25
|
+
style="bottom: -30px; right: -50px; width: 120px; height: 40px; transform: rotate(-15deg)"
|
|
26
|
+
></div>
|
|
16
27
|
</div>
|
|
17
28
|
|
|
18
29
|
<!-- Moment 2: 62% STRUGGLE WITH STATIC CONTENT -->
|
|
19
|
-
<div id="moment-2" class="moment" style="opacity: 0; transform: scale(0) rotate(-5deg)
|
|
30
|
+
<div id="moment-2" class="moment" style="opacity: 0; transform: scale(0) rotate(-5deg)">
|
|
20
31
|
<div class="sticker-stack">
|
|
21
32
|
<div class="sticker-bg white-bg"></div>
|
|
22
33
|
<div class="sticker-content blue-bg white-border">
|
|
@@ -25,12 +36,24 @@
|
|
|
25
36
|
</div>
|
|
26
37
|
</div>
|
|
27
38
|
<!-- Decorative shapes -->
|
|
28
|
-
<div
|
|
29
|
-
|
|
39
|
+
<div
|
|
40
|
+
class="shape blob yellow-bg"
|
|
41
|
+
style="
|
|
42
|
+
top: -50px;
|
|
43
|
+
right: -30px;
|
|
44
|
+
width: 100px;
|
|
45
|
+
height: 100px;
|
|
46
|
+
border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
|
|
47
|
+
"
|
|
48
|
+
></div>
|
|
49
|
+
<div
|
|
50
|
+
class="shape circle pink-bg"
|
|
51
|
+
style="bottom: -20px; left: -40px; width: 60px; height: 60px"
|
|
52
|
+
></div>
|
|
30
53
|
</div>
|
|
31
54
|
|
|
32
55
|
<!-- Moment 3: 75% LACK EDITING SKILLS -->
|
|
33
|
-
<div id="moment-3" class="moment" style="opacity: 0; transform: scale(0) rotate(3deg)
|
|
56
|
+
<div id="moment-3" class="moment" style="opacity: 0; transform: scale(0) rotate(3deg)">
|
|
34
57
|
<div class="sticker-stack">
|
|
35
58
|
<div class="sticker-bg pink-bg"></div>
|
|
36
59
|
<div class="sticker-content white-bg pink-border">
|
|
@@ -39,8 +62,20 @@
|
|
|
39
62
|
</div>
|
|
40
63
|
</div>
|
|
41
64
|
<!-- Decorative shapes -->
|
|
42
|
-
<div
|
|
43
|
-
|
|
65
|
+
<div
|
|
66
|
+
class="shape pill blue-bg"
|
|
67
|
+
style="
|
|
68
|
+
top: -30px;
|
|
69
|
+
left: 50%;
|
|
70
|
+
transform: translateX(-50%) rotate(5deg);
|
|
71
|
+
width: 150px;
|
|
72
|
+
height: 45px;
|
|
73
|
+
"
|
|
74
|
+
></div>
|
|
75
|
+
<div
|
|
76
|
+
class="shape circle yellow-bg"
|
|
77
|
+
style="bottom: -40px; right: -20px; width: 90px; height: 90px"
|
|
78
|
+
></div>
|
|
44
79
|
</div>
|
|
45
80
|
</div>
|
|
46
81
|
|
|
@@ -49,7 +84,7 @@
|
|
|
49
84
|
width: 1920px;
|
|
50
85
|
height: 1080px;
|
|
51
86
|
position: relative;
|
|
52
|
-
font-family:
|
|
87
|
+
font-family: "Nunito", sans-serif;
|
|
53
88
|
overflow: hidden;
|
|
54
89
|
}
|
|
55
90
|
|
|
@@ -120,19 +155,41 @@
|
|
|
120
155
|
}
|
|
121
156
|
|
|
122
157
|
/* Colors */
|
|
123
|
-
[data-composition-id="stats"] .blue-bg {
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
[data-composition-id="stats"] .
|
|
127
|
-
|
|
158
|
+
[data-composition-id="stats"] .blue-bg {
|
|
159
|
+
background-color: #0057ff;
|
|
160
|
+
}
|
|
161
|
+
[data-composition-id="stats"] .pink-bg {
|
|
162
|
+
background-color: #ff2d8a;
|
|
163
|
+
}
|
|
164
|
+
[data-composition-id="stats"] .lime-bg {
|
|
165
|
+
background-color: #7fff00;
|
|
166
|
+
}
|
|
167
|
+
[data-composition-id="stats"] .yellow-bg {
|
|
168
|
+
background-color: #ffe500;
|
|
169
|
+
}
|
|
170
|
+
[data-composition-id="stats"] .white-bg {
|
|
171
|
+
background-color: #ffffff;
|
|
172
|
+
}
|
|
128
173
|
|
|
129
|
-
[data-composition-id="stats"] .blue-text {
|
|
130
|
-
|
|
131
|
-
|
|
174
|
+
[data-composition-id="stats"] .blue-text {
|
|
175
|
+
color: #0057ff;
|
|
176
|
+
}
|
|
177
|
+
[data-composition-id="stats"] .white-text {
|
|
178
|
+
color: #ffffff;
|
|
179
|
+
}
|
|
180
|
+
[data-composition-id="stats"] .pink-text {
|
|
181
|
+
color: #ff2d8a;
|
|
182
|
+
}
|
|
132
183
|
|
|
133
|
-
[data-composition-id="stats"] .blue-border {
|
|
134
|
-
|
|
135
|
-
|
|
184
|
+
[data-composition-id="stats"] .blue-border {
|
|
185
|
+
border-color: #0057ff;
|
|
186
|
+
}
|
|
187
|
+
[data-composition-id="stats"] .white-border {
|
|
188
|
+
border-color: #ffffff;
|
|
189
|
+
}
|
|
190
|
+
[data-composition-id="stats"] .pink-border {
|
|
191
|
+
border-color: #ff2d8a;
|
|
192
|
+
}
|
|
136
193
|
|
|
137
194
|
/* Typography */
|
|
138
195
|
[data-composition-id="stats"] .stat-number {
|
|
@@ -161,14 +218,64 @@
|
|
|
161
218
|
</style>
|
|
162
219
|
|
|
163
220
|
<script>
|
|
164
|
-
(function() {
|
|
165
|
-
const TRANSCRIPT = [
|
|
221
|
+
(function () {
|
|
222
|
+
const TRANSCRIPT = [
|
|
223
|
+
{ text: "We", start: 0.119, end: 0.259 },
|
|
224
|
+
{ text: "asked", start: 0.319, end: 0.479 },
|
|
225
|
+
{ text: "what", start: 0.519, end: 0.659 },
|
|
226
|
+
{ text: "you", start: 0.699, end: 0.819 },
|
|
227
|
+
{ text: "needed.", start: 0.859, end: 1.819 },
|
|
228
|
+
{ text: "Forty-seven", start: 1.839, end: 2.299 },
|
|
229
|
+
{ text: "percent", start: 2.399, end: 2.679 },
|
|
230
|
+
{ text: "of", start: 2.7, end: 2.799 },
|
|
231
|
+
{ text: "you", start: 2.839, end: 2.939 },
|
|
232
|
+
{ text: "said", start: 3.039, end: 3.179 },
|
|
233
|
+
{ text: "motion", start: 3.24, end: 3.559 },
|
|
234
|
+
{ text: "graphics.", start: 3.579, end: 4.639 },
|
|
235
|
+
{ text: "Sixty-two", start: 4.659, end: 5.179 },
|
|
236
|
+
{ text: "percent", start: 5.299, end: 5.759 },
|
|
237
|
+
{ text: "said", start: 5.859, end: 5.98 },
|
|
238
|
+
{ text: "static", start: 6.099, end: 6.399 },
|
|
239
|
+
{ text: "content", start: 6.46, end: 6.879 },
|
|
240
|
+
{ text: "was", start: 6.92, end: 7.079 },
|
|
241
|
+
{ text: "costing", start: 7.099, end: 7.48 },
|
|
242
|
+
{ text: "you", start: 7.5, end: 7.579 },
|
|
243
|
+
{ text: "attention,", start: 7.679, end: 8.659 },
|
|
244
|
+
{ text: "and", start: 8.699, end: 8.86 },
|
|
245
|
+
{ text: "three", start: 8.88, end: 9.06 },
|
|
246
|
+
{ text: "out", start: 9.079, end: 9.18 },
|
|
247
|
+
{ text: "of", start: 9.199, end: 9.34 },
|
|
248
|
+
{ text: "four", start: 9.38, end: 9.799 },
|
|
249
|
+
{ text: "said", start: 9.84, end: 10.0 },
|
|
250
|
+
{ text: "you", start: 10.019, end: 10.159 },
|
|
251
|
+
{ text: "know", start: 10.179, end: 10.36 },
|
|
252
|
+
{ text: "the", start: 10.38, end: 10.479 },
|
|
253
|
+
{ text: "look", start: 10.52, end: 10.699 },
|
|
254
|
+
{ text: "you", start: 10.739, end: 10.859 },
|
|
255
|
+
{ text: "want", start: 10.98, end: 11.34 },
|
|
256
|
+
{ text: "but", start: 11.359, end: 11.52 },
|
|
257
|
+
{ text: "don't", start: 11.56, end: 11.779 },
|
|
258
|
+
{ text: "have", start: 11.819, end: 11.94 },
|
|
259
|
+
{ text: "the", start: 11.96, end: 12.06 },
|
|
260
|
+
{ text: "editing", start: 12.079, end: 12.4 },
|
|
261
|
+
{ text: "skills", start: 12.52, end: 12.86 },
|
|
262
|
+
{ text: "to", start: 12.88, end: 13.0 },
|
|
263
|
+
{ text: "get", start: 13.019, end: 13.18 },
|
|
264
|
+
{ text: "there.", start: 13.22, end: 14.22 },
|
|
265
|
+
{ text: "So", start: 14.239, end: 14.399 },
|
|
266
|
+
{ text: "we", start: 14.42, end: 14.52 },
|
|
267
|
+
{ text: "built", start: 14.619, end: 14.88 },
|
|
268
|
+
{ text: "Hyperframes", start: 15.079, end: 15.42 },
|
|
269
|
+
];
|
|
166
270
|
const tl = gsap.timeline({ paused: true });
|
|
167
271
|
|
|
168
272
|
// Helper to find word timing
|
|
169
273
|
function getWordTime(wordText) {
|
|
170
|
-
const word = TRANSCRIPT.find(w =>
|
|
171
|
-
w.text
|
|
274
|
+
const word = TRANSCRIPT.find((w) =>
|
|
275
|
+
w.text
|
|
276
|
+
.toLowerCase()
|
|
277
|
+
.replace(/[.,\/#!$%\^&\*;:{}=\-_`~()]/g, "")
|
|
278
|
+
.startsWith(wordText.toLowerCase()),
|
|
172
279
|
);
|
|
173
280
|
return word ? word.start : null;
|
|
174
281
|
}
|
|
@@ -179,72 +286,101 @@
|
|
|
179
286
|
const t3 = getWordTime("three") || 8.88;
|
|
180
287
|
|
|
181
288
|
// Moment 1 Animation (approx 5s)
|
|
182
|
-
tl.to(
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
289
|
+
tl.to(
|
|
290
|
+
"#moment-1",
|
|
291
|
+
{
|
|
292
|
+
opacity: 1,
|
|
293
|
+
scale: 1,
|
|
294
|
+
duration: 0.8,
|
|
295
|
+
ease: "elastic.out(1, 0.6)",
|
|
296
|
+
onStart: () => gsap.set("#moment-1", { transformOrigin: "center center" }),
|
|
297
|
+
},
|
|
298
|
+
t1,
|
|
299
|
+
);
|
|
189
300
|
|
|
190
301
|
// Moment 1 Exit (before Moment 2)
|
|
191
|
-
tl.to(
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
302
|
+
tl.to(
|
|
303
|
+
"#moment-1",
|
|
304
|
+
{
|
|
305
|
+
opacity: 0,
|
|
306
|
+
scale: 0.5,
|
|
307
|
+
duration: 0.3,
|
|
308
|
+
ease: "back.in(1.7)",
|
|
309
|
+
},
|
|
310
|
+
t2 - 0.4,
|
|
311
|
+
);
|
|
197
312
|
|
|
198
313
|
// Moment 2 Animation (approx 9s)
|
|
199
|
-
tl.to(
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
314
|
+
tl.to(
|
|
315
|
+
"#moment-2",
|
|
316
|
+
{
|
|
317
|
+
opacity: 1,
|
|
318
|
+
scale: 1,
|
|
319
|
+
duration: 0.8,
|
|
320
|
+
ease: "elastic.out(1, 0.6)",
|
|
321
|
+
onStart: () => gsap.set("#moment-2", { transformOrigin: "center center" }),
|
|
322
|
+
},
|
|
323
|
+
t2,
|
|
324
|
+
);
|
|
206
325
|
|
|
207
326
|
// Moment 2 Exit (before Moment 3)
|
|
208
|
-
tl.to(
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
327
|
+
tl.to(
|
|
328
|
+
"#moment-2",
|
|
329
|
+
{
|
|
330
|
+
opacity: 0,
|
|
331
|
+
scale: 0.5,
|
|
332
|
+
duration: 0.3,
|
|
333
|
+
ease: "back.in(1.7)",
|
|
334
|
+
},
|
|
335
|
+
t3 - 0.4,
|
|
336
|
+
);
|
|
214
337
|
|
|
215
338
|
// Moment 3 Animation (approx 13s)
|
|
216
|
-
tl.to(
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
339
|
+
tl.to(
|
|
340
|
+
"#moment-3",
|
|
341
|
+
{
|
|
342
|
+
opacity: 1,
|
|
343
|
+
scale: 1,
|
|
344
|
+
duration: 0.8,
|
|
345
|
+
ease: "elastic.out(1, 0.6)",
|
|
346
|
+
onStart: () => gsap.set("#moment-3", { transformOrigin: "center center" }),
|
|
347
|
+
},
|
|
348
|
+
t3,
|
|
349
|
+
);
|
|
223
350
|
|
|
224
351
|
// Moment 3 Exit: 3 words before 'Hyperframes'
|
|
225
352
|
// 'Editor' is at 15.079. 3 words before is 'So' at 14.239.
|
|
226
|
-
tl.to(
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
353
|
+
tl.to(
|
|
354
|
+
"#moment-3",
|
|
355
|
+
{
|
|
356
|
+
opacity: 0,
|
|
357
|
+
scale: 0.5,
|
|
358
|
+
duration: 0.3,
|
|
359
|
+
ease: "back.in(1.7)",
|
|
360
|
+
},
|
|
361
|
+
14.239,
|
|
362
|
+
);
|
|
232
363
|
|
|
233
364
|
// Ambient Motion (Finite)
|
|
234
365
|
const totalDuration = 16.04;
|
|
235
|
-
gsap.utils.toArray(
|
|
236
|
-
const stepDuration = 2 +
|
|
366
|
+
gsap.utils.toArray(".shape").forEach((shape, i) => {
|
|
367
|
+
const stepDuration = 2 + i * 0.2;
|
|
237
368
|
const steps = Math.ceil(totalDuration / stepDuration);
|
|
238
|
-
for(let s = 0; s < steps; s++) {
|
|
239
|
-
tl.to(
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
369
|
+
for (let s = 0; s < steps; s++) {
|
|
370
|
+
tl.to(
|
|
371
|
+
shape,
|
|
372
|
+
{
|
|
373
|
+
y: s % 2 === 0 ? 15 : -15,
|
|
374
|
+
rotation: s % 2 === 0 ? 5 : -5,
|
|
375
|
+
duration: stepDuration,
|
|
376
|
+
ease: "sine.inOut",
|
|
377
|
+
},
|
|
378
|
+
s * stepDuration,
|
|
379
|
+
);
|
|
245
380
|
}
|
|
246
381
|
});
|
|
247
382
|
|
|
383
|
+
window.__timelines = window.__timelines || {};
|
|
248
384
|
window.__timelines["stats"] = tl;
|
|
249
385
|
})();
|
|
250
386
|
</script>
|