hyperframes 0.1.5 → 0.1.7
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/README.md +5 -3
- package/dist/cli.js +6106 -5758
- package/dist/hyperframe-runtime.js +3 -3
- package/dist/hyperframe.manifest.json +1 -1
- package/dist/hyperframe.runtime.iife.js +3 -3
- package/dist/skills/captions/SKILL.md +138 -0
- package/dist/skills/compose-video/SKILL.md +149 -0
- package/dist/skills/compose-video/house-style.md +129 -0
- package/dist/skills/compose-video/palettes/bold-energetic.md +14 -0
- package/dist/skills/compose-video/palettes/clean-corporate.md +14 -0
- package/dist/skills/compose-video/palettes/dark-premium.md +14 -0
- package/dist/skills/compose-video/palettes/jewel-rich.md +14 -0
- package/dist/skills/compose-video/palettes/monochrome.md +14 -0
- package/dist/skills/compose-video/palettes/nature-earth.md +14 -0
- package/dist/skills/compose-video/palettes/neon-electric.md +14 -0
- package/dist/skills/compose-video/palettes/pastel-soft.md +14 -0
- package/dist/skills/compose-video/palettes/warm-editorial.md +14 -0
- package/dist/skills/compose-video/patterns.md +118 -0
- package/dist/studio/assets/{index-B3C3oxF8.js → index-Df6fO-S6.js} +4 -4
- package/dist/studio/index.html +1 -1
- package/dist/templates/_shared/CLAUDE.md +50 -0
- package/dist/templates/blank/index.html +67 -42
- package/package.json +7 -2
|
@@ -0,0 +1,118 @@
|
|
|
1
|
+
# Composition Patterns
|
|
2
|
+
|
|
3
|
+
## Picture-in-Picture (Video in a Frame)
|
|
4
|
+
|
|
5
|
+
Animate a wrapper div for position/size. The video fills the wrapper. The wrapper has NO data attributes.
|
|
6
|
+
|
|
7
|
+
```html
|
|
8
|
+
<div
|
|
9
|
+
id="pip-frame"
|
|
10
|
+
style="position:absolute;top:0;left:0;width:1920px;height:1080px;z-index:50;overflow:hidden;"
|
|
11
|
+
>
|
|
12
|
+
<video
|
|
13
|
+
id="el-video"
|
|
14
|
+
data-start="0"
|
|
15
|
+
data-duration="60"
|
|
16
|
+
data-track-index="0"
|
|
17
|
+
src="talking-head.mp4"
|
|
18
|
+
muted
|
|
19
|
+
playsinline
|
|
20
|
+
></video>
|
|
21
|
+
</div>
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
```js
|
|
25
|
+
tl.to(
|
|
26
|
+
"#pip-frame",
|
|
27
|
+
{ top: 700, left: 1360, width: 500, height: 280, borderRadius: 16, duration: 1 },
|
|
28
|
+
10,
|
|
29
|
+
);
|
|
30
|
+
tl.to("#pip-frame", { left: 40, duration: 0.6 }, 30);
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
## Title Card with Fade
|
|
34
|
+
|
|
35
|
+
```html
|
|
36
|
+
<div
|
|
37
|
+
id="title-card"
|
|
38
|
+
data-start="0"
|
|
39
|
+
data-duration="5"
|
|
40
|
+
data-track-index="5"
|
|
41
|
+
style="display:flex;align-items:center;justify-content:center;background:#111;z-index:60;"
|
|
42
|
+
>
|
|
43
|
+
<h1 style="font-size:64px;color:#fff;opacity:0;">My Video Title</h1>
|
|
44
|
+
</div>
|
|
45
|
+
```
|
|
46
|
+
|
|
47
|
+
```js
|
|
48
|
+
tl.to("#title-card h1", { opacity: 1, duration: 0.6 }, 0.3);
|
|
49
|
+
tl.to("#title-card", { opacity: 0, duration: 0.5 }, 4);
|
|
50
|
+
```
|
|
51
|
+
|
|
52
|
+
## Slide Show with Section Headers
|
|
53
|
+
|
|
54
|
+
Use separate elements on the same track, each with its own time range. Slides auto-mount/unmount based on `data-start`/`data-duration`.
|
|
55
|
+
|
|
56
|
+
```html
|
|
57
|
+
<div class="slide" data-start="0" data-duration="30" data-track-index="3">...</div>
|
|
58
|
+
<div class="slide" data-start="30" data-duration="25" data-track-index="3">...</div>
|
|
59
|
+
<div class="slide" data-start="55" data-duration="20" data-track-index="3">...</div>
|
|
60
|
+
```
|
|
61
|
+
|
|
62
|
+
## Top-Level Composition Example
|
|
63
|
+
|
|
64
|
+
```html
|
|
65
|
+
<div
|
|
66
|
+
id="comp-1"
|
|
67
|
+
data-composition-id="my-video"
|
|
68
|
+
data-start="0"
|
|
69
|
+
data-duration="60"
|
|
70
|
+
data-width="1920"
|
|
71
|
+
data-height="1080"
|
|
72
|
+
>
|
|
73
|
+
<!-- Primitive clips -->
|
|
74
|
+
<video
|
|
75
|
+
id="el-1"
|
|
76
|
+
data-start="0"
|
|
77
|
+
data-duration="10"
|
|
78
|
+
data-track-index="0"
|
|
79
|
+
src="..."
|
|
80
|
+
muted
|
|
81
|
+
playsinline
|
|
82
|
+
></video>
|
|
83
|
+
<video
|
|
84
|
+
id="el-2"
|
|
85
|
+
data-start="el-1"
|
|
86
|
+
data-duration="8"
|
|
87
|
+
data-track-index="0"
|
|
88
|
+
src="..."
|
|
89
|
+
muted
|
|
90
|
+
playsinline
|
|
91
|
+
></video>
|
|
92
|
+
<img id="el-3" data-start="5" data-duration="4" data-track-index="1" src="..." />
|
|
93
|
+
<audio id="el-4" data-start="0" data-duration="30" data-track-index="2" src="..." />
|
|
94
|
+
|
|
95
|
+
<!-- Sub-compositions loaded from files -->
|
|
96
|
+
<div
|
|
97
|
+
id="el-5"
|
|
98
|
+
data-composition-id="intro-anim"
|
|
99
|
+
data-composition-src="compositions/intro-anim.html"
|
|
100
|
+
data-start="0"
|
|
101
|
+
data-track-index="3"
|
|
102
|
+
></div>
|
|
103
|
+
|
|
104
|
+
<div
|
|
105
|
+
id="el-6"
|
|
106
|
+
data-composition-id="captions"
|
|
107
|
+
data-composition-src="compositions/caption-overlay.html"
|
|
108
|
+
data-start="0"
|
|
109
|
+
data-track-index="4"
|
|
110
|
+
></div>
|
|
111
|
+
|
|
112
|
+
<script>
|
|
113
|
+
// Just register the timeline — framework auto-nests sub-compositions
|
|
114
|
+
const tl = gsap.timeline({ paused: true });
|
|
115
|
+
window.__timelines["my-video"] = tl;
|
|
116
|
+
</script>
|
|
117
|
+
</div>
|
|
118
|
+
```
|