hyperframes 0.8.36 → 0.8.38

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 (33) hide show
  1. package/dist/cli.js +287 -251
  2. package/dist/docs/examples.md +1 -1
  3. package/dist/fontLocalizeCli.js +49 -108
  4. package/dist/hyperframe-runtime.js +24 -24
  5. package/dist/hyperframe.manifest.json +1 -1
  6. package/dist/hyperframe.runtime.iife.js +24 -24
  7. package/dist/hyperframes-player.global.js +1 -1
  8. package/dist/skills/hyperframes/SKILL.md +1 -1
  9. package/dist/skills/hyperframes/references/brief-contract.md +108 -0
  10. package/dist/skills/hyperframes/references/brief-format.md +72 -0
  11. package/dist/skills/hyperframes/references/capability-menu.md +1 -1
  12. package/dist/skills/hyperframes/references/frame-worker-core.md +80 -0
  13. package/dist/skills/hyperframes/references/intent-interview.md +8 -8
  14. package/dist/skills/hyperframes/references/production-loop.md +26 -0
  15. package/dist/skills/hyperframes/references/review-loop.md +41 -0
  16. package/dist/skills/hyperframes/references/route-briefs.md +1 -1
  17. package/dist/skills/hyperframes/references/script-format.md +52 -0
  18. package/dist/skills/hyperframes/references/storyboard-format.md +130 -0
  19. package/dist/skills/hyperframes/references/subagent-dispatch.md +35 -0
  20. package/dist/skills/hyperframes/scripts/lib/frame-packets-core.mjs +212 -0
  21. package/dist/skills/hyperframes-cli/SKILL.md +9 -8
  22. package/dist/skills/hyperframes-cli/references/init-and-scaffold.md +6 -6
  23. package/dist/skills/hyperframes-cli/references/preview-render.md +6 -3
  24. package/dist/studio/assets/{hyperframes-player-BIpJmC69.js → hyperframes-player-otov4oIw.js} +1 -1
  25. package/dist/studio/assets/{index-z2_QKypm.js → index-B-FzDhAR.js} +1 -1
  26. package/dist/studio/assets/{index-Df3VgdgL.js → index-Bw6cyxOm.js} +1 -1
  27. package/dist/studio/assets/{index-BmPeyP0k.js → index-DWFEyVJZ.js} +4 -4
  28. package/dist/studio/index.html +1 -1
  29. package/dist/studio/index.js +1 -1
  30. package/dist/studio/index.js.map +1 -1
  31. package/dist/templates/blank/index.html +17 -37
  32. package/dist/templates/from-file/index.html +74 -0
  33. package/package.json +1 -1
package/dist/templates/blank/index.html CHANGED
@@ -16,15 +16,21 @@
16
16
  width: 1920px;
17
17
  height: 1080px;
18
18
  overflow: hidden;
19
- background: #000;
19
+ background: #0a0a0a;
20
20
  }
21
- body {
22
- font-family: "Inter", sans-serif;
21
+ #root {
22
+ width: 100%;
23
+ height: 100%;
24
+ display: flex;
25
+ align-items: center;
26
+ justify-content: center;
27
+ font-family: Inter, ui-sans-serif, system-ui, sans-serif;
23
28
  }
24
- code,
25
- pre,
26
- .monospace {
27
- font-family: "JetBrains Mono", monospace;
29
+ #title {
30
+ color: #f4f4f5;
31
+ font-size: 72px;
32
+ font-weight: 600;
33
+ letter-spacing: -0.03em;
28
34
  }
29
35
  </style>
30
36
  </head>
@@ -33,43 +39,17 @@
33
39
  id="root"
34
40
  data-composition-id="main"
35
41
  data-start="0"
36
- data-duration="__VIDEO_DURATION__"
42
+ data-duration="10"
37
43
  data-width="1920"
38
44
  data-height="1080"
39
45
  >
40
- <video
41
- id="a-roll"
42
- class="clip"
43
- src="__VIDEO_SRC__"
44
- muted
45
- playsinline
46
- data-duration="__VIDEO_DURATION__"
47
- data-track-index="0"
48
- style="position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover"
49
- ></video>
50
- <audio
51
- id="a-roll-audio"
52
- src="__VIDEO_SRC__"
53
- data-start="0"
54
- data-duration="__VIDEO_DURATION__"
55
- data-track-index="2"
56
- data-volume="1"
57
- ></audio>
58
-
59
- <!--
60
- Add your clips here. Example:
61
- <div id="title" class="clip" data-start="0" data-duration="5" data-track-index="1"
62
- style="font-size: 64px; color: #fff; padding: 40px">
63
- Hello World
64
- </div>
65
- -->
46
+ <h1 id="title" class="clip" data-start="0" data-duration="10" data-track-index="0">Title</h1>
66
47
  </div>
67
-
68
48
  <script>
69
- window.__timelines = window.__timelines || {};
70
49
  const tl = gsap.timeline({ paused: true });
71
- // Example: tl.from("#title", { opacity: 0, y: -50, duration: 1 }, 0);
50
+ // Example: tl.fromTo("#title", { opacity: 0, y: 24 }, { opacity: 1, y: 0, duration: 0.6 }, 0);
72
51
  window.__timelines["main"] = tl;
52
+ tl.seek(0);
73
53
  </script>
74
54
  </body>
75
55
  </html>
package/dist/templates/from-file/index.html ADDED
@@ -0,0 +1,74 @@
1
+ <!doctype html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <meta name="viewport" content="width=1920, height=1080" />
6
+ <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
7
+ <style>
8
+ * {
9
+ margin: 0;
10
+ padding: 0;
11
+ box-sizing: border-box;
12
+ }
13
+ html,
14
+ body {
15
+ margin: 0;
16
+ width: 1920px;
17
+ height: 1080px;
18
+ overflow: hidden;
19
+ background: #000;
20
+ }
21
+ body {
22
+ font-family: "Inter", sans-serif;
23
+ }
24
+ code,
25
+ pre,
26
+ .monospace {
27
+ font-family: "JetBrains Mono", monospace;
28
+ }
29
+ </style>
30
+ </head>
31
+ <body>
32
+ <div
33
+ id="root"
34
+ data-composition-id="main"
35
+ data-start="0"
36
+ data-duration="__VIDEO_DURATION__"
37
+ data-width="1920"
38
+ data-height="1080"
39
+ >
40
+ <video
41
+ id="a-roll"
42
+ class="clip"
43
+ src="__VIDEO_SRC__"
44
+ muted
45
+ playsinline
46
+ data-duration="__VIDEO_DURATION__"
47
+ data-track-index="0"
48
+ style="position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover"
49
+ ></video>
50
+ <audio
51
+ id="a-roll-audio"
52
+ src="__VIDEO_SRC__"
53
+ data-start="0"
54
+ data-duration="__VIDEO_DURATION__"
55
+ data-track-index="2"
56
+ data-volume="1"
57
+ ></audio>
58
+
59
+ <!--
60
+ Add your clips here. Example:
61
+ <div id="title" class="clip" data-start="0" data-duration="5" data-track-index="1"
62
+ style="font-size: 64px; color: #fff; padding: 40px">
63
+ Hello World
64
+ </div>
65
+ -->
66
+ </div>
67
+
68
+ <script>
69
+ const tl = gsap.timeline({ paused: true });
70
+ // Example: tl.from("#title", { opacity: 0, y: -50, duration: 1 }, 0);
71
+ window.__timelines["main"] = tl;
72
+ </script>
73
+ </body>
74
+ </html>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "hyperframes",
3
- "version": "0.8.36",
3
+ "version": "0.8.38",
4
4
  "description": "HyperFrames CLI — create, preview, and render HTML video compositions",
5
5
  "license": "Apache-2.0",
6
6
  "repository": {