hyperframes 0.1.0
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 +22905 -0
- package/dist/docs/compositions.md +26 -0
- package/dist/docs/data-attributes.md +22 -0
- package/dist/docs/gsap.md +23 -0
- package/dist/docs/rendering.md +23 -0
- package/dist/docs/templates.md +15 -0
- package/dist/docs/troubleshooting.md +22 -0
- package/dist/hyperframe-runtime.js +12 -0
- package/dist/studio/assets/index-B1830ANq.js +78 -0
- package/dist/studio/assets/index-KoBceNoU.css +1 -0
- package/dist/studio/icons/timeline/audio.svg +7 -0
- package/dist/studio/icons/timeline/captions.svg +5 -0
- package/dist/studio/icons/timeline/composition.svg +12 -0
- package/dist/studio/icons/timeline/image.svg +18 -0
- package/dist/studio/icons/timeline/music.svg +10 -0
- package/dist/studio/icons/timeline/text.svg +3 -0
- package/dist/studio/index.html +13 -0
- package/dist/templates/play-mode/compositions/captions.html +97 -0
- package/dist/templates/play-mode/compositions/intro.html +88 -0
- package/dist/templates/play-mode/compositions/stats.html +252 -0
- package/dist/templates/play-mode/index.html +173 -0
- package/dist/templates/swiss-grid/assets/swiss-grid.svg +116 -0
- package/dist/templates/swiss-grid/compositions/captions.html +95 -0
- package/dist/templates/swiss-grid/compositions/graphics.html +198 -0
- package/dist/templates/swiss-grid/compositions/intro.html +114 -0
- package/dist/templates/swiss-grid/index.html +172 -0
- package/dist/templates/vignelli/compositions/captions.html +122 -0
- package/dist/templates/vignelli/compositions/overlays.html +271 -0
- package/dist/templates/vignelli/index.html +171 -0
- package/dist/templates/warm-grain/compositions/captions.html +133 -0
- package/dist/templates/warm-grain/compositions/graphics.html +157 -0
- package/dist/templates/warm-grain/compositions/intro.html +77 -0
- package/dist/templates/warm-grain/index.html +195 -0
- package/package.json +54 -0
|
@@ -0,0 +1,195 @@
|
|
|
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://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
|
|
8
|
+
<style>
|
|
9
|
+
body, html {
|
|
10
|
+
margin: 0;
|
|
11
|
+
padding: 0;
|
|
12
|
+
width: 1920px;
|
|
13
|
+
height: 1080px;
|
|
14
|
+
overflow: hidden;
|
|
15
|
+
background-color: #F5F0E0; /* Cream background */
|
|
16
|
+
font-family: 'Outfit', 'Lexend', sans-serif;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
#main-composition {
|
|
20
|
+
position: relative;
|
|
21
|
+
width: 1920px;
|
|
22
|
+
height: 1080px;
|
|
23
|
+
overflow: hidden;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
/* Paper texture and Grain overlay */
|
|
27
|
+
#grain-overlay-comp {
|
|
28
|
+
position: absolute;
|
|
29
|
+
top: 0;
|
|
30
|
+
left: 0;
|
|
31
|
+
width: 100%;
|
|
32
|
+
height: 100%;
|
|
33
|
+
pointer-events: none;
|
|
34
|
+
z-index: 100;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
/* Grain animation */
|
|
38
|
+
@keyframes grain-noise {
|
|
39
|
+
0%, 100% { transform: translate(0, 0); }
|
|
40
|
+
10% { transform: translate(-5%, -5%); }
|
|
41
|
+
20% { transform: translate(-10%, 5%); }
|
|
42
|
+
30% { transform: translate(5%, -10%); }
|
|
43
|
+
40% { transform: translate(-5%, 15%); }
|
|
44
|
+
50% { transform: translate(-10%, 5%); }
|
|
45
|
+
60% { transform: translate(15%, 0); }
|
|
46
|
+
70% { transform: translate(0, 10%); }
|
|
47
|
+
80% { transform: translate(-15%, 0); }
|
|
48
|
+
90% { transform: translate(10%, 5%); }
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
.grain-texture {
|
|
52
|
+
position: absolute;
|
|
53
|
+
top: -50%;
|
|
54
|
+
left: -50%;
|
|
55
|
+
width: 200%;
|
|
56
|
+
height: 200%;
|
|
57
|
+
background: url('https://www.transparenttextures.com/patterns/natural-paper.png');
|
|
58
|
+
opacity: 0.15;
|
|
59
|
+
animation: grain-noise 0.5s steps(1) infinite;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
#a-roll {
|
|
63
|
+
position: absolute;
|
|
64
|
+
border-radius: 16px;
|
|
65
|
+
object-fit: cover;
|
|
66
|
+
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
.comp-layer {
|
|
70
|
+
position: absolute;
|
|
71
|
+
top: 0;
|
|
72
|
+
left: 0;
|
|
73
|
+
width: 100%;
|
|
74
|
+
height: 100%;
|
|
75
|
+
pointer-events: none;
|
|
76
|
+
}
|
|
77
|
+
</style>
|
|
78
|
+
</head>
|
|
79
|
+
<body>
|
|
80
|
+
<div id="main-composition" data-composition-id="main-video" data-width="1920" data-height="1080" data-duration="17">
|
|
81
|
+
|
|
82
|
+
<!-- Background Layer -->
|
|
83
|
+
<div id="grain-overlay-comp" data-composition-id="grain-overlay" data-width="1920" data-height="1080" data-duration="17" data-track-index="100">
|
|
84
|
+
<div class="grain-texture"></div>
|
|
85
|
+
<script>
|
|
86
|
+
const grainTl = gsap.timeline({ paused: true });
|
|
87
|
+
window.__timelines["grain-overlay"] = grainTl;
|
|
88
|
+
</script>
|
|
89
|
+
</div>
|
|
90
|
+
|
|
91
|
+
<!-- A-Roll Video -->
|
|
92
|
+
<video id="a-roll"
|
|
93
|
+
src="__VIDEO_SRC__"
|
|
94
|
+
data-start="0"
|
|
95
|
+
data-duration="17"
|
|
96
|
+
data-track-index="0">
|
|
97
|
+
</video>
|
|
98
|
+
|
|
99
|
+
<!-- Compositions -->
|
|
100
|
+
<div id="intro-layer" class="comp-layer"
|
|
101
|
+
data-composition-id="intro"
|
|
102
|
+
data-composition-src="compositions/intro.html"
|
|
103
|
+
data-start="0"
|
|
104
|
+
data-duration="2.5"
|
|
105
|
+
data-track-index="1">
|
|
106
|
+
</div>
|
|
107
|
+
|
|
108
|
+
<div id="graphics-layer" class="comp-layer"
|
|
109
|
+
data-composition-id="graphics"
|
|
110
|
+
data-composition-src="compositions/graphics.html"
|
|
111
|
+
data-start="0"
|
|
112
|
+
data-duration="17"
|
|
113
|
+
data-track-index="2">
|
|
114
|
+
</div>
|
|
115
|
+
|
|
116
|
+
<div id="captions-layer" class="comp-layer"
|
|
117
|
+
data-composition-id="captions"
|
|
118
|
+
data-composition-src="compositions/captions.html"
|
|
119
|
+
data-start="0"
|
|
120
|
+
data-duration="17"
|
|
121
|
+
data-track-index="3">
|
|
122
|
+
</div>
|
|
123
|
+
|
|
124
|
+
<!-- SFX -->
|
|
125
|
+
<audio id="sfx-swipe-1" src="" data-start="1.8" data-duration="1" data-track-index="4"></audio>
|
|
126
|
+
<audio id="sfx-swipe-2" src="" data-start="4.6" data-duration="1" data-track-index="4"></audio>
|
|
127
|
+
<audio id="sfx-swipe-3" src="" data-start="8.8" data-duration="1" data-track-index="4"></audio>
|
|
128
|
+
|
|
129
|
+
<script>
|
|
130
|
+
const tl = gsap.timeline({ paused: true });
|
|
131
|
+
|
|
132
|
+
// A-Roll Framing Strategy
|
|
133
|
+
// 1. 0s-1.8s: Intro scale up from small (60%) to medium (80%) - Shifted right slightly to clear speaker card
|
|
134
|
+
// 2. 1.8s-4.6s: Grid view / Shift Left (x: 600, scale: 70%) for 47% graphic
|
|
135
|
+
// 3. 4.6s-8.8s: Shift Center-Bottom (y: 800, scale: 70%) for 62% graphic (top)
|
|
136
|
+
// 4. 8.8s-14s: Shift Right (x: 1320, scale: 75%) for Editing Skills graphic (left)
|
|
137
|
+
// 5. 14s-17s: Final Reveal (Center, scale: 100%)
|
|
138
|
+
|
|
139
|
+
// Initial state
|
|
140
|
+
gsap.set('#a-roll', { x: 1100, y: 540, xPercent: -50, yPercent: -50, width: 1920 * 0.6, height: 1080 * 0.6 });
|
|
141
|
+
|
|
142
|
+
// 1. Intro Scale Up (0s - 1.8s)
|
|
143
|
+
tl.to('#a-roll', {
|
|
144
|
+
x: 1200,
|
|
145
|
+
width: 1920 * 0.8,
|
|
146
|
+
height: 1080 * 0.8,
|
|
147
|
+
duration: 1.8,
|
|
148
|
+
ease: "power2.inOut"
|
|
149
|
+
}, 0);
|
|
150
|
+
|
|
151
|
+
// 2. Moment 1: 47% Graphic Trigger (1.8s) - Shift Left
|
|
152
|
+
tl.to('#a-roll', {
|
|
153
|
+
x: 600,
|
|
154
|
+
y: 540,
|
|
155
|
+
width: 1920 * 0.7,
|
|
156
|
+
height: 1080 * 0.7,
|
|
157
|
+
duration: 0.5,
|
|
158
|
+
ease: "power2.inOut"
|
|
159
|
+
}, 1.8);
|
|
160
|
+
|
|
161
|
+
// 3. Moment 2: 62% Graphic Trigger (4.6s) - Shift Center-Bottom
|
|
162
|
+
tl.to('#a-roll', {
|
|
163
|
+
x: 960,
|
|
164
|
+
y: 750,
|
|
165
|
+
width: 1920 * 0.7,
|
|
166
|
+
height: 1080 * 0.7,
|
|
167
|
+
duration: 0.5,
|
|
168
|
+
ease: "power2.inOut"
|
|
169
|
+
}, 4.6);
|
|
170
|
+
|
|
171
|
+
// 4. Moment 3: Editing Skills Trigger (8.8s) - Shift Right
|
|
172
|
+
tl.to('#a-roll', {
|
|
173
|
+
x: 1320,
|
|
174
|
+
y: 540,
|
|
175
|
+
width: 1920 * 0.75,
|
|
176
|
+
height: 1080 * 0.75,
|
|
177
|
+
duration: 0.5,
|
|
178
|
+
ease: "power2.inOut"
|
|
179
|
+
}, 8.8);
|
|
180
|
+
|
|
181
|
+
// 5. Final Reveal (14s - 17s)
|
|
182
|
+
tl.to('#a-roll', {
|
|
183
|
+
x: 960,
|
|
184
|
+
y: 540,
|
|
185
|
+
width: 1920 * 1.0,
|
|
186
|
+
height: 1080 * 1.0,
|
|
187
|
+
duration: 1.0,
|
|
188
|
+
ease: "power2.inOut"
|
|
189
|
+
}, 14);
|
|
190
|
+
|
|
191
|
+
window.__timelines["main-video"] = tl;
|
|
192
|
+
</script>
|
|
193
|
+
</div>
|
|
194
|
+
</body>
|
|
195
|
+
</html>
|
package/package.json
ADDED
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "hyperframes",
|
|
3
|
+
"version": "0.1.0",
|
|
4
|
+
"description": "HyperFrames CLI — create, preview, and render HTML video compositions",
|
|
5
|
+
"type": "module",
|
|
6
|
+
"bin": {
|
|
7
|
+
"hyperframes": "./dist/cli.js"
|
|
8
|
+
},
|
|
9
|
+
"files": [
|
|
10
|
+
"dist"
|
|
11
|
+
],
|
|
12
|
+
"scripts": {
|
|
13
|
+
"dev": "tsx src/cli.ts",
|
|
14
|
+
"build": "pnpm build:studio && tsup && pnpm build:runtime && pnpm build:copy",
|
|
15
|
+
"build:studio": "cd ../studio && pnpm build",
|
|
16
|
+
"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
|
+
"typecheck": "tsc --noEmit"
|
|
19
|
+
},
|
|
20
|
+
"dependencies": {
|
|
21
|
+
"@hono/node-server": "^1.8.0",
|
|
22
|
+
"@puppeteer/browsers": "^2.13.0",
|
|
23
|
+
"adm-zip": "^0.5.16",
|
|
24
|
+
"cheerio": "^1.2.0",
|
|
25
|
+
"citty": "^0.2.1",
|
|
26
|
+
"esbuild": "^0.25.0",
|
|
27
|
+
"hono": "^4.0.0",
|
|
28
|
+
"mime-types": "^3.0.2",
|
|
29
|
+
"open": "^10.0.0",
|
|
30
|
+
"puppeteer-core": "^24.39.1"
|
|
31
|
+
},
|
|
32
|
+
"devDependencies": {
|
|
33
|
+
"@hyperframes/core": "workspace:*",
|
|
34
|
+
"@clack/prompts": "^1.1.0",
|
|
35
|
+
"@hono/node-server": "^1.0.0",
|
|
36
|
+
"@hyperframes/engine": "workspace:*",
|
|
37
|
+
"@hyperframes/producer": "workspace:*",
|
|
38
|
+
"@types/adm-zip": "^0.5.7",
|
|
39
|
+
"@types/mime-types": "^3.0.1",
|
|
40
|
+
"@types/node": "^22.0.0",
|
|
41
|
+
"adm-zip": "^0.5.16",
|
|
42
|
+
"cheerio": "^1.2.0",
|
|
43
|
+
"hono": "^4.0.0",
|
|
44
|
+
"linkedom": "^0.18.12",
|
|
45
|
+
"mime-types": "^3.0.2",
|
|
46
|
+
"picocolors": "^1.1.1",
|
|
47
|
+
"tsup": "^8.0.0",
|
|
48
|
+
"tsx": "^4.0.0",
|
|
49
|
+
"typescript": "^5.0.0"
|
|
50
|
+
},
|
|
51
|
+
"engines": {
|
|
52
|
+
"node": ">=22"
|
|
53
|
+
}
|
|
54
|
+
}
|