hyperframes 0.6.108 → 0.6.109
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 +86 -59
- package/dist/studio/assets/{index-Btg-jqxS.js → index-CFCe0Xvn.js} +1 -1
- package/dist/studio/assets/{index-tn9M43-U.js → index-SlMJloLR.js} +1 -1
- package/dist/studio/assets/{index-BgbVhDYd.js → index-ho_f4axK.js} +2 -2
- package/dist/studio/index.html +1 -1
- package/dist/templates/warm-grain/compositions/captions.html +154 -0
- package/dist/templates/warm-grain/compositions/graphics.html +165 -0
- package/dist/templates/warm-grain/compositions/intro.html +84 -0
- package/dist/templates/warm-grain/index.html +271 -0
- package/dist/templates/warm-grain/registry-item.json +34 -0
- package/package.json +1 -1
package/dist/studio/index.html
CHANGED
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
|
|
6
6
|
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
|
7
7
|
<title>HyperFrames Studio</title>
|
|
8
|
-
<script type="module" crossorigin src="/assets/index-
|
|
8
|
+
<script type="module" crossorigin src="/assets/index-ho_f4axK.js"></script>
|
|
9
9
|
<link rel="stylesheet" crossorigin href="/assets/index-BVqybwMG.css">
|
|
10
10
|
</head>
|
|
11
11
|
<body>
|
|
@@ -0,0 +1,154 @@
|
|
|
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 class="captions-container">
|
|
9
|
+
<div id="caption-box" class="caption-box">
|
|
10
|
+
<span id="caption-text" class="caption-text"></span>
|
|
11
|
+
</div>
|
|
12
|
+
</div>
|
|
13
|
+
|
|
14
|
+
<style>
|
|
15
|
+
[data-composition-id="captions"] .captions-container {
|
|
16
|
+
width: 100%;
|
|
17
|
+
height: 100%;
|
|
18
|
+
display: flex;
|
|
19
|
+
justify-content: center;
|
|
20
|
+
align-items: flex-end;
|
|
21
|
+
padding-bottom: 230px; /* Position at y: 850 (1080 - 230 = 850) */
|
|
22
|
+
pointer-events: none;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
[data-composition-id="captions"] .caption-box {
|
|
26
|
+
background-color: #7a6248;
|
|
27
|
+
padding: 12px 32px;
|
|
28
|
+
border-radius: 24px;
|
|
29
|
+
display: flex;
|
|
30
|
+
justify-content: center;
|
|
31
|
+
align-items: center;
|
|
32
|
+
min-width: 100px;
|
|
33
|
+
max-width: 80%;
|
|
34
|
+
opacity: 0;
|
|
35
|
+
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
[data-composition-id="captions"] .caption-text {
|
|
39
|
+
color: #f5f0e0;
|
|
40
|
+
font-family: "Inter", sans-serif;
|
|
41
|
+
font-size: 48px;
|
|
42
|
+
font-weight: 700;
|
|
43
|
+
text-align: center;
|
|
44
|
+
line-height: 1.2;
|
|
45
|
+
white-space: nowrap;
|
|
46
|
+
max-width: 1600px;
|
|
47
|
+
overflow: hidden;
|
|
48
|
+
}
|
|
49
|
+
</style>
|
|
50
|
+
|
|
51
|
+
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
|
|
52
|
+
<script>
|
|
53
|
+
(function () {
|
|
54
|
+
const script = [
|
|
55
|
+
{ "text": "We", "start": 0.119, "end": 0.259 },
|
|
56
|
+
{ "text": "asked", "start": 0.319, "end": 0.479 },
|
|
57
|
+
{ "text": "what", "start": 0.519, "end": 0.659 },
|
|
58
|
+
{ "text": "you", "start": 0.699, "end": 0.819 },
|
|
59
|
+
{ "text": "needed.", "start": 0.859, "end": 1.819 },
|
|
60
|
+
{ "text": "Forty-seven", "start": 1.86, "end": 2.299 },
|
|
61
|
+
{ "text": "percent", "start": 2.399, "end": 2.679 },
|
|
62
|
+
{ "text": "of", "start": 2.7, "end": 2.799 },
|
|
63
|
+
{ "text": "you", "start": 2.839, "end": 2.939 },
|
|
64
|
+
{ "text": "said", "start": 3.039, "end": 3.179 },
|
|
65
|
+
{ "text": "motion", "start": 3.24, "end": 3.559 },
|
|
66
|
+
{ "text": "graphics,", "start": 3.579, "end": 4.599 },
|
|
67
|
+
{ "text": "sixty-two", "start": 4.679, "end": 5.179 },
|
|
68
|
+
{ "text": "percent", "start": 5.299, "end": 5.759 },
|
|
69
|
+
{ "text": "said", "start": 5.859, "end": 5.98 },
|
|
70
|
+
{ "text": "static", "start": 6.079, "end": 6.399 },
|
|
71
|
+
{ "text": "content", "start": 6.46, "end": 6.879 },
|
|
72
|
+
{ "text": "was", "start": 6.92, "end": 7.079 },
|
|
73
|
+
{ "text": "costing", "start": 7.099, "end": 7.48 },
|
|
74
|
+
{ "text": "you", "start": 7.5, "end": 7.579 },
|
|
75
|
+
{ "text": "attention,", "start": 7.679, "end": 8.659 },
|
|
76
|
+
{ "text": "and", "start": 8.699, "end": 8.86 },
|
|
77
|
+
{ "text": "three", "start": 8.88, "end": 9.06 },
|
|
78
|
+
{ "text": "out", "start": 9.079, "end": 9.18 },
|
|
79
|
+
{ "text": "of", "start": 9.199, "end": 9.34 },
|
|
80
|
+
{ "text": "four", "start": 9.38, "end": 9.799 },
|
|
81
|
+
{ "text": "said", "start": 9.84, "end": 10.0 },
|
|
82
|
+
{ "text": "you", "start": 10.019, "end": 10.159 },
|
|
83
|
+
{ "text": "know", "start": 10.179, "end": 10.36 },
|
|
84
|
+
{ "text": "the", "start": 10.38, "end": 10.42 },
|
|
85
|
+
{ "text": "look", "start": 10.519, "end": 10.699 },
|
|
86
|
+
{ "text": "you", "start": 10.739, "end": 10.859 },
|
|
87
|
+
{ "text": "want", "start": 10.98, "end": 11.34 },
|
|
88
|
+
{ "text": "but", "start": 11.359, "end": 11.52 },
|
|
89
|
+
{ "text": "don't", "start": 11.56, "end": 11.779 },
|
|
90
|
+
{ "text": "have", "start": 11.819, "end": 11.94 },
|
|
91
|
+
{ "text": "the", "start": 11.96, "end": 12.06 },
|
|
92
|
+
{ "text": "editing", "start": 12.079, "end": 12.4 },
|
|
93
|
+
{ "text": "skills", "start": 12.52, "end": 12.86 },
|
|
94
|
+
{ "text": "to", "start": 12.88, "end": 13.0 },
|
|
95
|
+
{ "text": "get", "start": 13.019, "end": 13.18 },
|
|
96
|
+
{ "text": "there.", "start": 13.22, "end": 14.22 },
|
|
97
|
+
{ "text": "So", "start": 14.239, "end": 14.399 },
|
|
98
|
+
{ "text": "we", "start": 14.42, "end": 14.52 },
|
|
99
|
+
{ "text": "built", "start": 14.619, "end": 14.88 },
|
|
100
|
+
{ "text": "Hyperframes.", "start": 15.079, "end": 16.02 }
|
|
101
|
+
];
|
|
102
|
+
|
|
103
|
+
// Group words into lines (max 5 words per line)
|
|
104
|
+
const lines = [];
|
|
105
|
+
for (let i = 0; i < script.length; i += 5) {
|
|
106
|
+
const lineWords = script.slice(i, i + 5);
|
|
107
|
+
lines.push({
|
|
108
|
+
text: lineWords.map((w) => w.text).join(" "),
|
|
109
|
+
start: lineWords[0].start,
|
|
110
|
+
end: lineWords[lineWords.length - 1].end,
|
|
111
|
+
});
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
const tl = gsap.timeline({ paused: true });
|
|
115
|
+
const box = document.querySelector('[data-composition-id="captions"] #caption-box');
|
|
116
|
+
const textEl = document.querySelector('[data-composition-id="captions"] #caption-text');
|
|
117
|
+
|
|
118
|
+
lines.forEach((line, index) => {
|
|
119
|
+
// Fade in and set text
|
|
120
|
+
tl.set(box, { visibility: "visible" }, line.start);
|
|
121
|
+
tl.to(
|
|
122
|
+
box,
|
|
123
|
+
{
|
|
124
|
+
opacity: 1,
|
|
125
|
+
duration: 0.1,
|
|
126
|
+
ease: "power2.out",
|
|
127
|
+
onStart: () => {
|
|
128
|
+
textEl.textContent = line.text;
|
|
129
|
+
},
|
|
130
|
+
},
|
|
131
|
+
line.start,
|
|
132
|
+
);
|
|
133
|
+
|
|
134
|
+
// Fade out at the end of the line
|
|
135
|
+
tl.to(
|
|
136
|
+
box,
|
|
137
|
+
{
|
|
138
|
+
opacity: 0,
|
|
139
|
+
duration: 0.1,
|
|
140
|
+
ease: "power2.in",
|
|
141
|
+
},
|
|
142
|
+
line.end,
|
|
143
|
+
);
|
|
144
|
+
|
|
145
|
+
// Hard kill to ensure caption is hidden
|
|
146
|
+
tl.set(box, { opacity: 0, visibility: "hidden" }, line.end + 0.1);
|
|
147
|
+
});
|
|
148
|
+
|
|
149
|
+
window.__timelines = window.__timelines || {};
|
|
150
|
+
window.__timelines["captions"] = tl;
|
|
151
|
+
})();
|
|
152
|
+
</script>
|
|
153
|
+
</div>
|
|
154
|
+
</template>
|
|
@@ -0,0 +1,165 @@
|
|
|
1
|
+
<template id="graphics-template">
|
|
2
|
+
<div data-composition-id="graphics" data-width="1920" data-height="1080" data-duration="14">
|
|
3
|
+
<!-- Moment 1: 47% Stat (1.8s - 4.5s) -->
|
|
4
|
+
<div id="moment-1" class="moment circle-stat">
|
|
5
|
+
<div class="stat-content">
|
|
6
|
+
<div class="stat-text">47%</div>
|
|
7
|
+
<div class="stat-desc">Need Motion Graphics</div>
|
|
8
|
+
</div>
|
|
9
|
+
</div>
|
|
10
|
+
|
|
11
|
+
<!-- Moment 2: 62% Stat (4.6s - 8.6s) -->
|
|
12
|
+
<div id="moment-2" class="moment pill-stat">
|
|
13
|
+
<div class="stat-text">62%</div>
|
|
14
|
+
</div>
|
|
15
|
+
|
|
16
|
+
<!-- Moment 3: Editing Skills (8.8s - 14s) -->
|
|
17
|
+
<div id="moment-3" class="moment rect-stat">
|
|
18
|
+
<div class="icon-shape">
|
|
19
|
+
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
|
|
20
|
+
<path
|
|
21
|
+
d="M20,20 Q50,0 80,20 Q100,50 80,80 Q50,100 20,80 Q0,50 20,20"
|
|
22
|
+
fill="currentColor"
|
|
23
|
+
/>
|
|
24
|
+
</svg>
|
|
25
|
+
</div>
|
|
26
|
+
<div class="stat-text">Editing Skills</div>
|
|
27
|
+
</div>
|
|
28
|
+
|
|
29
|
+
<style>
|
|
30
|
+
[data-composition-id="graphics"] {
|
|
31
|
+
position: relative;
|
|
32
|
+
width: 1920px;
|
|
33
|
+
height: 1080px;
|
|
34
|
+
font-family: "Outfit", sans-serif;
|
|
35
|
+
color: white;
|
|
36
|
+
overflow: hidden;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
[data-composition-id="graphics"] .moment {
|
|
40
|
+
position: absolute;
|
|
41
|
+
display: flex;
|
|
42
|
+
align-items: center;
|
|
43
|
+
justify-content: center;
|
|
44
|
+
opacity: 0;
|
|
45
|
+
/* We'll use GSAP to handle the centering and drift */
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
/* Moment 1: Forest Green Circle */
|
|
49
|
+
[data-composition-id="graphics"] #moment-1 {
|
|
50
|
+
width: 500px;
|
|
51
|
+
height: 500px;
|
|
52
|
+
background-color: #3b5e3a;
|
|
53
|
+
border-radius: 50%;
|
|
54
|
+
left: 1400px;
|
|
55
|
+
top: 540px;
|
|
56
|
+
transform: translate(-50%, -50%);
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
[data-composition-id="graphics"] .stat-content {
|
|
60
|
+
display: flex;
|
|
61
|
+
flex-direction: column;
|
|
62
|
+
align-items: center;
|
|
63
|
+
text-align: center;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
[data-composition-id="graphics"] .stat-desc {
|
|
67
|
+
font-size: 36px;
|
|
68
|
+
font-weight: 400;
|
|
69
|
+
margin-top: 10px;
|
|
70
|
+
max-width: 300px;
|
|
71
|
+
line-height: 1.2;
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
/* Moment 2: Ochre Pill */
|
|
75
|
+
[data-composition-id="graphics"] #moment-2 {
|
|
76
|
+
width: 500px;
|
|
77
|
+
height: 220px;
|
|
78
|
+
background-color: #cc8832;
|
|
79
|
+
border-radius: 110px;
|
|
80
|
+
left: 960px;
|
|
81
|
+
top: 200px;
|
|
82
|
+
transform: translate(-50%, -50%);
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
/* Moment 3: Terracotta Rounded Rect */
|
|
86
|
+
[data-composition-id="graphics"] #moment-3 {
|
|
87
|
+
width: 550px;
|
|
88
|
+
height: 180px;
|
|
89
|
+
background-color: #c45d3e;
|
|
90
|
+
border-radius: 40px;
|
|
91
|
+
left: 400px;
|
|
92
|
+
top: 540px;
|
|
93
|
+
transform: translate(-50%, -50%);
|
|
94
|
+
padding: 0 40px;
|
|
95
|
+
justify-content: center;
|
|
96
|
+
gap: 30px;
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
[data-composition-id="graphics"] .stat-text {
|
|
100
|
+
font-size: 80px;
|
|
101
|
+
font-weight: 700;
|
|
102
|
+
letter-spacing: -2px;
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
[data-composition-id="graphics"] #moment-3 .stat-text {
|
|
106
|
+
font-size: 54px;
|
|
107
|
+
letter-spacing: -1px;
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
[data-composition-id="graphics"] .icon-shape {
|
|
111
|
+
width: 80px;
|
|
112
|
+
height: 80px;
|
|
113
|
+
color: rgba(255, 255, 255, 0.9);
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
[data-composition-id="graphics"] .icon-shape svg {
|
|
117
|
+
width: 100%;
|
|
118
|
+
height: 100%;
|
|
119
|
+
}
|
|
120
|
+
</style>
|
|
121
|
+
|
|
122
|
+
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
|
|
123
|
+
<script>
|
|
124
|
+
(function () {
|
|
125
|
+
const tl = gsap.timeline({ paused: true });
|
|
126
|
+
|
|
127
|
+
// Moment 1: 1.8s - 4.5s
|
|
128
|
+
// Gentle drift into place and settle
|
|
129
|
+
tl.fromTo(
|
|
130
|
+
"#moment-1",
|
|
131
|
+
{ opacity: 0, x: "+=40", y: "+=15", scale: 0.8 },
|
|
132
|
+
{ opacity: 1, x: 0, y: 0, scale: 1, duration: 1.2, ease: "back.out(1.7)" },
|
|
133
|
+
1.8,
|
|
134
|
+
);
|
|
135
|
+
// Hold until 4.5s, then fade out
|
|
136
|
+
tl.to("#moment-1", { opacity: 0, scale: 0.8, duration: 0.3, ease: "power2.in" }, 4.2);
|
|
137
|
+
|
|
138
|
+
// Moment 2: 4.6s - 8.6s
|
|
139
|
+
// Gentle drift into place and settle
|
|
140
|
+
tl.fromTo(
|
|
141
|
+
"#moment-2",
|
|
142
|
+
{ opacity: 0, y: "-=40", x: "+=10", scale: 0.8 },
|
|
143
|
+
{ opacity: 1, y: 0, x: 0, scale: 1, duration: 1.2, ease: "back.out(1.7)" },
|
|
144
|
+
4.6,
|
|
145
|
+
);
|
|
146
|
+
// Hold until 8.6s, then fade out
|
|
147
|
+
tl.to("#moment-2", { opacity: 0, scale: 0.8, duration: 0.3, ease: "power2.in" }, 8.3);
|
|
148
|
+
|
|
149
|
+
// Moment 3: 8.8s - 14s
|
|
150
|
+
// Gentle drift into place and settle
|
|
151
|
+
tl.fromTo(
|
|
152
|
+
"#moment-3",
|
|
153
|
+
{ opacity: 0, x: "-=40", y: "-=10", scale: 0.8 },
|
|
154
|
+
{ opacity: 1, x: 0, y: 0, scale: 1, duration: 1.2, ease: "back.out(1.7)" },
|
|
155
|
+
8.8,
|
|
156
|
+
);
|
|
157
|
+
// Hold until end (14s)
|
|
158
|
+
tl.to("#moment-3", { opacity: 0, duration: 0.5, ease: "power2.in" }, 13.5);
|
|
159
|
+
|
|
160
|
+
window.__timelines = window.__timelines || {};
|
|
161
|
+
window.__timelines["graphics"] = tl;
|
|
162
|
+
})();
|
|
163
|
+
</script>
|
|
164
|
+
</div>
|
|
165
|
+
</template>
|
|
@@ -0,0 +1,84 @@
|
|
|
1
|
+
<template id="intro-template">
|
|
2
|
+
<div data-composition-id="intro" data-width="1920" data-height="1080" data-duration="3">
|
|
3
|
+
<div class="container">
|
|
4
|
+
<div class="title-card">
|
|
5
|
+
<h1 class="title">Hyperframes</h1>
|
|
6
|
+
<p class="subtitle">Design simplified.</p>
|
|
7
|
+
</div>
|
|
8
|
+
</div>
|
|
9
|
+
|
|
10
|
+
<style>
|
|
11
|
+
[data-composition-id="intro"] .container {
|
|
12
|
+
width: 100%;
|
|
13
|
+
height: 100%;
|
|
14
|
+
display: flex;
|
|
15
|
+
justify-content: flex-start; /* Align to left for speaker card */
|
|
16
|
+
align-items: center;
|
|
17
|
+
padding-left: 5%;
|
|
18
|
+
font-family: "Inter", sans-serif;
|
|
19
|
+
background: transparent;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
[data-composition-id="intro"] .title-card {
|
|
23
|
+
background-color: #3b5e3a; /* Forest Green for contrast */
|
|
24
|
+
padding: 40px 60px;
|
|
25
|
+
border-radius: 30px;
|
|
26
|
+
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
|
|
27
|
+
text-align: left;
|
|
28
|
+
opacity: 0;
|
|
29
|
+
transform: translateX(-100%); /* Start off-screen left */
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
[data-composition-id="intro"] .title {
|
|
33
|
+
font-size: 100px;
|
|
34
|
+
font-weight: 600;
|
|
35
|
+
color: #f5f0e0; /* Cream text on green card */
|
|
36
|
+
margin: 0;
|
|
37
|
+
line-height: 1.1;
|
|
38
|
+
letter-spacing: -2px;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
[data-composition-id="intro"] .subtitle {
|
|
42
|
+
font-size: 50px;
|
|
43
|
+
font-weight: 400;
|
|
44
|
+
color: #cc8832; /* Ochre accent */
|
|
45
|
+
margin: 10px 0 0 0;
|
|
46
|
+
line-height: 1.2;
|
|
47
|
+
}
|
|
48
|
+
</style>
|
|
49
|
+
|
|
50
|
+
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
|
|
51
|
+
<script>
|
|
52
|
+
(function () {
|
|
53
|
+
const tl = gsap.timeline({ paused: true });
|
|
54
|
+
|
|
55
|
+
// Animation: Speaker card slides in from the left
|
|
56
|
+
tl.to(
|
|
57
|
+
'[data-composition-id="intro"] .title-card',
|
|
58
|
+
{
|
|
59
|
+
opacity: 1,
|
|
60
|
+
x: 0,
|
|
61
|
+
duration: 0.8,
|
|
62
|
+
ease: "power2.out",
|
|
63
|
+
},
|
|
64
|
+
0.2,
|
|
65
|
+
);
|
|
66
|
+
|
|
67
|
+
// Exit: Slide off left at 1.8s (synced with 47% graphic)
|
|
68
|
+
tl.to(
|
|
69
|
+
'[data-composition-id="intro"] .title-card',
|
|
70
|
+
{
|
|
71
|
+
x: "-120%",
|
|
72
|
+
opacity: 0,
|
|
73
|
+
duration: 0.6,
|
|
74
|
+
ease: "power2.in",
|
|
75
|
+
},
|
|
76
|
+
1.8,
|
|
77
|
+
);
|
|
78
|
+
|
|
79
|
+
window.__timelines = window.__timelines || {};
|
|
80
|
+
window.__timelines["intro"] = tl;
|
|
81
|
+
})();
|
|
82
|
+
</script>
|
|
83
|
+
</div>
|
|
84
|
+
</template>
|
|
@@ -0,0 +1,271 @@
|
|
|
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>Warm Grain - Hyperframes</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: #f5f0e0; /* Cream background */
|
|
17
|
+
font-family: "Outfit", sans-serif;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
#main-composition {
|
|
21
|
+
position: relative;
|
|
22
|
+
width: 1920px;
|
|
23
|
+
height: 1080px;
|
|
24
|
+
overflow: hidden;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
/* Paper texture and Grain overlay */
|
|
28
|
+
#grain-overlay-comp {
|
|
29
|
+
position: absolute;
|
|
30
|
+
top: 0;
|
|
31
|
+
left: 0;
|
|
32
|
+
width: 100%;
|
|
33
|
+
height: 100%;
|
|
34
|
+
pointer-events: none;
|
|
35
|
+
z-index: 100;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
/* Grain animation */
|
|
39
|
+
@keyframes grain-noise {
|
|
40
|
+
0%,
|
|
41
|
+
100% {
|
|
42
|
+
transform: translate(0, 0);
|
|
43
|
+
}
|
|
44
|
+
10% {
|
|
45
|
+
transform: translate(-5%, -5%);
|
|
46
|
+
}
|
|
47
|
+
20% {
|
|
48
|
+
transform: translate(-10%, 5%);
|
|
49
|
+
}
|
|
50
|
+
30% {
|
|
51
|
+
transform: translate(5%, -10%);
|
|
52
|
+
}
|
|
53
|
+
40% {
|
|
54
|
+
transform: translate(-5%, 15%);
|
|
55
|
+
}
|
|
56
|
+
50% {
|
|
57
|
+
transform: translate(-10%, 5%);
|
|
58
|
+
}
|
|
59
|
+
60% {
|
|
60
|
+
transform: translate(15%, 0);
|
|
61
|
+
}
|
|
62
|
+
70% {
|
|
63
|
+
transform: translate(0, 10%);
|
|
64
|
+
}
|
|
65
|
+
80% {
|
|
66
|
+
transform: translate(-15%, 0);
|
|
67
|
+
}
|
|
68
|
+
90% {
|
|
69
|
+
transform: translate(10%, 5%);
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
.grain-texture {
|
|
74
|
+
position: absolute;
|
|
75
|
+
top: -50%;
|
|
76
|
+
left: -50%;
|
|
77
|
+
width: 200%;
|
|
78
|
+
height: 200%;
|
|
79
|
+
background: url("https://www.transparenttextures.com/patterns/natural-paper.png");
|
|
80
|
+
opacity: 0.15;
|
|
81
|
+
animation: grain-noise 0.5s steps(1) infinite;
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
#a-roll {
|
|
85
|
+
position: absolute;
|
|
86
|
+
border-radius: 16px;
|
|
87
|
+
object-fit: cover;
|
|
88
|
+
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
.comp-layer {
|
|
92
|
+
position: absolute;
|
|
93
|
+
top: 0;
|
|
94
|
+
left: 0;
|
|
95
|
+
width: 100%;
|
|
96
|
+
height: 100%;
|
|
97
|
+
pointer-events: none;
|
|
98
|
+
}
|
|
99
|
+
</style>
|
|
100
|
+
</head>
|
|
101
|
+
<body>
|
|
102
|
+
<div
|
|
103
|
+
id="main-composition"
|
|
104
|
+
data-composition-id="main-video"
|
|
105
|
+
data-width="1920"
|
|
106
|
+
data-height="1080"
|
|
107
|
+
data-start="0"
|
|
108
|
+
data-duration="__VIDEO_DURATION__"
|
|
109
|
+
>
|
|
110
|
+
<!-- Background Layer -->
|
|
111
|
+
<div
|
|
112
|
+
id="grain-overlay-comp"
|
|
113
|
+
data-composition-id="grain-overlay"
|
|
114
|
+
data-width="1920"
|
|
115
|
+
data-height="1080"
|
|
116
|
+
data-start="0"
|
|
117
|
+
data-duration="__VIDEO_DURATION__"
|
|
118
|
+
data-track-index="100"
|
|
119
|
+
>
|
|
120
|
+
<div class="grain-texture"></div>
|
|
121
|
+
<script>
|
|
122
|
+
const grainTl = gsap.timeline({ paused: true });
|
|
123
|
+
window.__timelines = window.__timelines || {};
|
|
124
|
+
window.__timelines["grain-overlay"] = grainTl;
|
|
125
|
+
</script>
|
|
126
|
+
</div>
|
|
127
|
+
|
|
128
|
+
<!-- A-Roll Video (muted — audio is separate) -->
|
|
129
|
+
<video
|
|
130
|
+
id="a-roll"
|
|
131
|
+
src="__VIDEO_SRC__"
|
|
132
|
+
muted
|
|
133
|
+
playsinline
|
|
134
|
+
data-start="0"
|
|
135
|
+
data-duration="__VIDEO_DURATION__"
|
|
136
|
+
data-track-index="0"
|
|
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>
|
|
146
|
+
|
|
147
|
+
<!-- Compositions -->
|
|
148
|
+
<div
|
|
149
|
+
id="intro-layer"
|
|
150
|
+
class="comp-layer"
|
|
151
|
+
data-composition-id="intro"
|
|
152
|
+
data-composition-src="compositions/intro.html"
|
|
153
|
+
data-start="0"
|
|
154
|
+
data-duration="2.5"
|
|
155
|
+
data-track-index="1"
|
|
156
|
+
></div>
|
|
157
|
+
|
|
158
|
+
<div
|
|
159
|
+
id="graphics-layer"
|
|
160
|
+
class="comp-layer"
|
|
161
|
+
data-composition-id="graphics"
|
|
162
|
+
data-composition-src="compositions/graphics.html"
|
|
163
|
+
data-start="0"
|
|
164
|
+
data-duration="__VIDEO_DURATION__"
|
|
165
|
+
data-track-index="2"
|
|
166
|
+
></div>
|
|
167
|
+
|
|
168
|
+
<div
|
|
169
|
+
id="captions-layer"
|
|
170
|
+
class="comp-layer"
|
|
171
|
+
data-composition-id="captions"
|
|
172
|
+
data-composition-src="compositions/captions.html"
|
|
173
|
+
data-start="0"
|
|
174
|
+
data-duration="__VIDEO_DURATION__"
|
|
175
|
+
data-track-index="3"
|
|
176
|
+
></div>
|
|
177
|
+
|
|
178
|
+
<script>
|
|
179
|
+
const tl = gsap.timeline({ paused: true });
|
|
180
|
+
|
|
181
|
+
// A-Roll Framing Strategy
|
|
182
|
+
// 1. 0s-1.8s: Intro scale up from small (60%) to medium (80%) - Shifted right slightly to clear speaker card
|
|
183
|
+
// 2. 1.8s-4.6s: Grid view / Shift Left (x: 600, scale: 70%) for 47% graphic
|
|
184
|
+
// 3. 4.6s-8.8s: Shift Center-Bottom (y: 800, scale: 70%) for 62% graphic (top)
|
|
185
|
+
// 4. 8.8s-14s: Shift Right (x: 1320, scale: 75%) for Editing Skills graphic (left)
|
|
186
|
+
// 5. 14s-17s: Final Reveal (Center, scale: 100%)
|
|
187
|
+
|
|
188
|
+
// Initial state
|
|
189
|
+
gsap.set("#a-roll", {
|
|
190
|
+
x: 1100,
|
|
191
|
+
y: 540,
|
|
192
|
+
xPercent: -50,
|
|
193
|
+
yPercent: -50,
|
|
194
|
+
width: 1920 * 0.6,
|
|
195
|
+
height: 1080 * 0.6,
|
|
196
|
+
});
|
|
197
|
+
|
|
198
|
+
// 1. Intro Scale Up (0s - 1.8s)
|
|
199
|
+
tl.to(
|
|
200
|
+
"#a-roll",
|
|
201
|
+
{
|
|
202
|
+
x: 1200,
|
|
203
|
+
width: 1920 * 0.8,
|
|
204
|
+
height: 1080 * 0.8,
|
|
205
|
+
duration: 1.8,
|
|
206
|
+
ease: "power2.inOut",
|
|
207
|
+
},
|
|
208
|
+
0,
|
|
209
|
+
);
|
|
210
|
+
|
|
211
|
+
// 2. Moment 1: 47% Graphic Trigger (1.8s) - Shift Left
|
|
212
|
+
tl.to(
|
|
213
|
+
"#a-roll",
|
|
214
|
+
{
|
|
215
|
+
x: 600,
|
|
216
|
+
y: 540,
|
|
217
|
+
width: 1920 * 0.7,
|
|
218
|
+
height: 1080 * 0.7,
|
|
219
|
+
duration: 0.5,
|
|
220
|
+
ease: "power2.inOut",
|
|
221
|
+
},
|
|
222
|
+
1.8,
|
|
223
|
+
);
|
|
224
|
+
|
|
225
|
+
// 3. Moment 2: 62% Graphic Trigger (4.6s) - Shift Center-Bottom
|
|
226
|
+
tl.to(
|
|
227
|
+
"#a-roll",
|
|
228
|
+
{
|
|
229
|
+
x: 960,
|
|
230
|
+
y: 750,
|
|
231
|
+
width: 1920 * 0.7,
|
|
232
|
+
height: 1080 * 0.7,
|
|
233
|
+
duration: 0.5,
|
|
234
|
+
ease: "power2.inOut",
|
|
235
|
+
},
|
|
236
|
+
4.6,
|
|
237
|
+
);
|
|
238
|
+
|
|
239
|
+
// 4. Moment 3: Editing Skills Trigger (8.8s) - Shift Right
|
|
240
|
+
tl.to(
|
|
241
|
+
"#a-roll",
|
|
242
|
+
{
|
|
243
|
+
x: 1320,
|
|
244
|
+
y: 540,
|
|
245
|
+
width: 1920 * 0.75,
|
|
246
|
+
height: 1080 * 0.75,
|
|
247
|
+
duration: 0.5,
|
|
248
|
+
ease: "power2.inOut",
|
|
249
|
+
},
|
|
250
|
+
8.8,
|
|
251
|
+
);
|
|
252
|
+
|
|
253
|
+
// 5. Final Reveal (14s - 17s)
|
|
254
|
+
tl.to(
|
|
255
|
+
"#a-roll",
|
|
256
|
+
{
|
|
257
|
+
x: 960,
|
|
258
|
+
y: 540,
|
|
259
|
+
width: 1920 * 1.0,
|
|
260
|
+
height: 1080 * 1.0,
|
|
261
|
+
duration: 1.0,
|
|
262
|
+
ease: "power2.inOut",
|
|
263
|
+
},
|
|
264
|
+
14,
|
|
265
|
+
);
|
|
266
|
+
|
|
267
|
+
window.__timelines["main-video"] = tl;
|
|
268
|
+
</script>
|
|
269
|
+
</div>
|
|
270
|
+
</body>
|
|
271
|
+
</html>
|