hyperframes 0.1.12 → 0.1.14
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 -1
- package/dist/cli.js +17587 -16489
- package/dist/hyperframe-runtime.js +8 -4
- package/dist/hyperframe.manifest.json +1 -1
- package/dist/hyperframe.runtime.iife.js +8 -4
- package/dist/skills/hyperframes-captions/SKILL.md +194 -28
- package/dist/skills/hyperframes-compose/SKILL.md +1 -0
- package/dist/skills/hyperframes-compose/house-style.md +2 -2
- package/dist/studio/assets/index-CLmYRLY-.css +1 -0
- package/dist/studio/assets/index-CRvFpc0E.js +84 -0
- package/dist/studio/index.html +2 -2
- package/dist/templates/_shared/CLAUDE.md +14 -2
- package/dist/templates/blank/compositions/captions.html +3 -0
- package/dist/templates/blank/index.html +1 -1
- package/package.json +4 -2
- package/dist/studio/assets/index-BEwJNmPo.js +0 -92
- package/dist/studio/assets/index-BnvciBdD.css +0 -1
package/dist/studio/index.html
CHANGED
|
@@ -4,8 +4,8 @@
|
|
|
4
4
|
<meta charset="UTF-8" />
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
6
6
|
<title>HyperFrames Studio</title>
|
|
7
|
-
<script type="module" crossorigin src="/assets/index-
|
|
8
|
-
<link rel="stylesheet" crossorigin href="/assets/index-
|
|
7
|
+
<script type="module" crossorigin src="/assets/index-CRvFpc0E.js"></script>
|
|
8
|
+
<link rel="stylesheet" crossorigin href="/assets/index-CLmYRLY-.css">
|
|
9
9
|
</head>
|
|
10
10
|
<body>
|
|
11
11
|
<div id="root"></div>
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
| Skill | Command | When to use |
|
|
8
8
|
| ------------------------ | ----------------------- | ------------------------------------------------------------------------------------------------------ |
|
|
9
9
|
| **hyperframes-compose** | `/hyperframes-compose` | Creating or editing ANY HTML composition — videos, animations, title cards, overlays, sub-compositions |
|
|
10
|
-
| **hyperframes-captions** | `/hyperframes-captions` |
|
|
10
|
+
| **hyperframes-captions** | `/hyperframes-captions` | Any text synced to audio: captions, subtitles, lyrics, karaoke. Also covers transcription strategy. |
|
|
11
11
|
| **gsap-core** | `/gsap-core` | GSAP tweens: `gsap.to()`, `from()`, `fromTo()`, easing, stagger, defaults |
|
|
12
12
|
| **gsap-timeline** | `/gsap-timeline` | Timeline sequencing, position parameter, labels, nesting |
|
|
13
13
|
| **gsap-performance** | `/gsap-performance` | Animation performance — transforms over layout props, will-change, batching |
|
|
@@ -21,7 +21,9 @@
|
|
|
21
21
|
```bash
|
|
22
22
|
npx hyperframes dev # preview in browser (studio editor)
|
|
23
23
|
npx hyperframes render # render to MP4
|
|
24
|
-
npx hyperframes lint # validate compositions
|
|
24
|
+
npx hyperframes lint # validate compositions (errors + warnings)
|
|
25
|
+
npx hyperframes lint --verbose # include info-level findings
|
|
26
|
+
npx hyperframes lint --json # machine-readable output for CI
|
|
25
27
|
npx hyperframes docs <topic> # reference docs in terminal
|
|
26
28
|
```
|
|
27
29
|
|
|
@@ -48,6 +50,16 @@ https://hyperframes.heygen.com/llms.txt
|
|
|
48
50
|
- `meta.json` — project metadata (id, name)
|
|
49
51
|
- `transcript.json` — whisper word-level transcript (if generated)
|
|
50
52
|
|
|
53
|
+
## Linting — ALWAYS RUN AFTER CHANGES
|
|
54
|
+
|
|
55
|
+
After creating or editing any `.html` composition, **always** run the linter before considering the task complete:
|
|
56
|
+
|
|
57
|
+
```bash
|
|
58
|
+
npx hyperframes lint
|
|
59
|
+
```
|
|
60
|
+
|
|
61
|
+
Fix all errors before presenting the result. Warnings are informational and usually safe to ignore.
|
|
62
|
+
|
|
51
63
|
## Key Rules
|
|
52
64
|
|
|
53
65
|
1. Every timed element needs `data-start`, `data-duration`, and `data-track-index`
|
|
@@ -37,6 +37,8 @@
|
|
|
37
37
|
0 2px 8px rgba(0, 0, 0, 0.8),
|
|
38
38
|
0 0 2px rgba(0, 0, 0, 0.9);
|
|
39
39
|
white-space: nowrap;
|
|
40
|
+
max-width: 1600px;
|
|
41
|
+
overflow: hidden;
|
|
40
42
|
}
|
|
41
43
|
</style>
|
|
42
44
|
|
|
@@ -83,6 +85,7 @@
|
|
|
83
85
|
index < lines.length - 1 ? Math.min(line.end, lines[index + 1].start) : line.end;
|
|
84
86
|
|
|
85
87
|
tl.to(el, { opacity: 0, y: -10, duration: 0.25, ease: "power2.in" }, hideTime - 0.25);
|
|
88
|
+
tl.set(el, { opacity: 0, visibility: "hidden" }, hideTime);
|
|
86
89
|
});
|
|
87
90
|
|
|
88
91
|
window.__timelines["captions"] = tl;
|
|
@@ -31,10 +31,10 @@
|
|
|
31
31
|
>
|
|
32
32
|
<video
|
|
33
33
|
id="a-roll"
|
|
34
|
+
class="clip"
|
|
34
35
|
src="__VIDEO_SRC__"
|
|
35
36
|
muted
|
|
36
37
|
playsinline
|
|
37
|
-
data-start="0"
|
|
38
38
|
data-duration="__VIDEO_DURATION__"
|
|
39
39
|
data-track-index="0"
|
|
40
40
|
style="position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover"
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "hyperframes",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.14",
|
|
4
4
|
"description": "HyperFrames CLI — create, preview, and render HTML video compositions",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -15,6 +15,7 @@
|
|
|
15
15
|
],
|
|
16
16
|
"type": "module",
|
|
17
17
|
"scripts": {
|
|
18
|
+
"test": "vitest run",
|
|
18
19
|
"dev": "tsx src/cli.ts",
|
|
19
20
|
"build": "bun run build:fonts && bun run build:studio && tsup && bun run build:runtime && bun run build:copy",
|
|
20
21
|
"build:fonts": "cd ../producer && tsx scripts/generate-font-data.ts",
|
|
@@ -52,7 +53,8 @@
|
|
|
52
53
|
"picocolors": "^1.1.1",
|
|
53
54
|
"tsup": "^8.0.0",
|
|
54
55
|
"tsx": "^4.0.0",
|
|
55
|
-
"typescript": "^5.0.0"
|
|
56
|
+
"typescript": "^5.0.0",
|
|
57
|
+
"vitest": "^3.2.4"
|
|
56
58
|
},
|
|
57
59
|
"engines": {
|
|
58
60
|
"node": ">=22"
|