hyperframes 0.1.2 → 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.
Files changed (22) hide show
  1. package/dist/cli.js +1734 -539
  2. package/dist/hyperframe-runtime.js +1 -0
  3. package/dist/hyperframe.manifest.json +22 -0
  4. package/dist/hyperframe.runtime.iife.js +13 -0
  5. package/dist/templates/blank/compositions/captions.html +92 -0
  6. package/dist/templates/blank/index.html +44 -0
  7. package/dist/templates/play-mode/compositions/captions.html +7 -1
  8. package/dist/templates/play-mode/compositions/intro.html +2 -1
  9. package/dist/templates/play-mode/compositions/stats.html +7 -1
  10. package/dist/templates/play-mode/index.html +17 -7
  11. package/dist/templates/swiss-grid/compositions/captions.html +7 -1
  12. package/dist/templates/swiss-grid/compositions/graphics.html +1 -0
  13. package/dist/templates/swiss-grid/compositions/intro.html +1 -0
  14. package/dist/templates/swiss-grid/index.html +21 -10
  15. package/dist/templates/vignelli/compositions/captions.html +7 -1
  16. package/dist/templates/vignelli/compositions/overlays.html +1 -0
  17. package/dist/templates/vignelli/index.html +16 -4
  18. package/dist/templates/warm-grain/compositions/captions.html +7 -1
  19. package/dist/templates/warm-grain/compositions/graphics.html +1 -0
  20. package/dist/templates/warm-grain/compositions/intro.html +1 -0
  21. package/dist/templates/warm-grain/index.html +19 -6
  22. package/package.json +4 -3
package/dist/templates/swiss-grid/index.html CHANGED
@@ -81,7 +81,8 @@
81
81
  data-composition-id="master"
82
82
  data-width="1920"
83
83
  data-height="1080"
84
- data-duration="16.04"
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="16.04"
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="16.04"
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="16.04"
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="16.04"
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" src=""></audio>
143
- <audio id="sfx-stat1" data-start="1.86" data-track-index="5" data-duration="1" src=""></audio>
144
- <audio id="sfx-stat2" data-start="4.68" data-track-index="5" data-duration="1" src=""></audio>
145
- <audio id="sfx-stat3" data-start="8.88" data-track-index="5" data-duration="1" src=""></audio>
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 || {};
package/dist/templates/vignelli/compositions/captions.html CHANGED
@@ -1,5 +1,10 @@
1
1
  <template id="captions-template">
2
- <div data-composition-id="captions" data-width="1080" data-height="1920" data-duration="13.88">
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>
package/dist/templates/vignelli/compositions/overlays.html CHANGED
@@ -316,6 +316,7 @@
316
316
  );
317
317
  tl.from("#branding .logo-underline", { scaleX: 0, duration: 0.8, ease: "expo.out" }, 13.04);
318
318
 
319
+ window.__timelines = window.__timelines || {};
319
320
  window.__timelines["overlays"] = tl;
320
321
  </script>
321
322
  </div>
package/dist/templates/vignelli/index.html CHANGED
@@ -105,18 +105,29 @@
105
105
  data-composition-id="main-comp"
106
106
  data-width="1080"
107
107
  data-height="1920"
108
- data-duration="13.88"
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="13.88"
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="13.88"
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="13.88"
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>
package/dist/templates/warm-grain/compositions/captions.html CHANGED
@@ -1,5 +1,10 @@
1
1
  <template id="captions-template">
2
- <div data-composition-id="captions" data-width="1920" data-height="1080" data-duration="18">
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>
package/dist/templates/warm-grain/compositions/graphics.html CHANGED
@@ -156,6 +156,7 @@
156
156
  // Hold until end (14s)
157
157
  tl.to("#moment-3", { opacity: 0, duration: 0.5, ease: "power2.in" }, 13.5);
158
158
 
159
+ window.__timelines = window.__timelines || {};
159
160
  window.__timelines["graphics"] = tl;
160
161
  })();
161
162
  </script>
package/dist/templates/warm-grain/compositions/intro.html CHANGED
@@ -78,6 +78,7 @@
78
78
  1.8,
79
79
  );
80
80
 
81
+ window.__timelines = window.__timelines || {};
81
82
  window.__timelines["intro"] = tl;
82
83
  })();
83
84
  </script>
package/dist/templates/warm-grain/index.html CHANGED
@@ -104,7 +104,8 @@
104
104
  data-composition-id="main-video"
105
105
  data-width="1920"
106
106
  data-height="1080"
107
- data-duration="17"
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-duration="17"
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="17"
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="17"
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="17"
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.2",
3
+ "version": "0.1.4",
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": {