hyperframes 0.8.37 → 0.8.39
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 +136 -148
- package/dist/docs/examples.md +1 -1
- package/dist/fontLocalizeCli.js +18 -95
- package/dist/hyperframes-player.global.js +1 -1
- package/dist/skills/hyperframes/SKILL.md +1 -1
- package/dist/skills/hyperframes/references/brief-contract.md +108 -0
- package/dist/skills/hyperframes/references/brief-format.md +72 -0
- package/dist/skills/hyperframes/references/capability-menu.md +1 -1
- package/dist/skills/hyperframes/references/frame-worker-core.md +80 -0
- package/dist/skills/hyperframes/references/intent-interview.md +8 -8
- package/dist/skills/hyperframes/references/production-loop.md +26 -0
- package/dist/skills/hyperframes/references/review-loop.md +41 -0
- package/dist/skills/hyperframes/references/route-briefs.md +1 -1
- package/dist/skills/hyperframes/references/script-format.md +52 -0
- package/dist/skills/hyperframes/references/storyboard-format.md +130 -0
- package/dist/skills/hyperframes/references/subagent-dispatch.md +35 -0
- package/dist/skills/hyperframes/scripts/lib/frame-packets-core.mjs +212 -0
- package/dist/skills/hyperframes-cli/SKILL.md +9 -8
- package/dist/skills/hyperframes-cli/references/init-and-scaffold.md +6 -6
- package/dist/skills/hyperframes-cli/references/preview-render.md +6 -3
- package/dist/studio/assets/{hyperframes-player-DrGk-lf5.js → hyperframes-player-BBFfad14.js} +1 -1
- package/dist/studio/assets/{index-DMsdtB-j.js → index-3XC5KvGR.js} +4 -4
- package/dist/studio/assets/{index-xK1YGiPD.js → index-CtYBUtk8.js} +1 -1
- package/dist/studio/assets/{index-BtGF7Kl-.js → index-De_8OqJf.js} +1 -1
- package/dist/studio/index.html +1 -1
- package/dist/studio/index.js +1 -1
- package/dist/studio/index.js.map +1 -1
- package/dist/templates/blank/index.html +17 -37
- package/dist/templates/from-file/index.html +74 -0
- package/package.json +1 -1
|
@@ -16,15 +16,21 @@
|
|
|
16
16
|
width: 1920px;
|
|
17
17
|
height: 1080px;
|
|
18
18
|
overflow: hidden;
|
|
19
|
-
background: #
|
|
19
|
+
background: #0a0a0a;
|
|
20
20
|
}
|
|
21
|
-
|
|
22
|
-
|
|
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
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
font-
|
|
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="
|
|
42
|
+
data-duration="10"
|
|
37
43
|
data-width="1920"
|
|
38
44
|
data-height="1080"
|
|
39
45
|
>
|
|
40
|
-
<
|
|
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.
|
|
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>
|
|
@@ -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>
|