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.
Files changed (23) hide show
  1. package/README.md +5 -3
  2. package/dist/cli.js +6106 -5758
  3. package/dist/hyperframe-runtime.js +3 -3
  4. package/dist/hyperframe.manifest.json +1 -1
  5. package/dist/hyperframe.runtime.iife.js +3 -3
  6. package/dist/skills/captions/SKILL.md +138 -0
  7. package/dist/skills/compose-video/SKILL.md +149 -0
  8. package/dist/skills/compose-video/house-style.md +129 -0
  9. package/dist/skills/compose-video/palettes/bold-energetic.md +14 -0
  10. package/dist/skills/compose-video/palettes/clean-corporate.md +14 -0
  11. package/dist/skills/compose-video/palettes/dark-premium.md +14 -0
  12. package/dist/skills/compose-video/palettes/jewel-rich.md +14 -0
  13. package/dist/skills/compose-video/palettes/monochrome.md +14 -0
  14. package/dist/skills/compose-video/palettes/nature-earth.md +14 -0
  15. package/dist/skills/compose-video/palettes/neon-electric.md +14 -0
  16. package/dist/skills/compose-video/palettes/pastel-soft.md +14 -0
  17. package/dist/skills/compose-video/palettes/warm-editorial.md +14 -0
  18. package/dist/skills/compose-video/patterns.md +118 -0
  19. package/dist/studio/assets/{index-B3C3oxF8.js → index-Df6fO-S6.js} +4 -4
  20. package/dist/studio/index.html +1 -1
  21. package/dist/templates/_shared/CLAUDE.md +50 -0
  22. package/dist/templates/blank/index.html +67 -42
  23. package/package.json +7 -2
package/dist/studio/index.html CHANGED
@@ -4,7 +4,7 @@
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-B3C3oxF8.js"></script>
7
+ <script type="module" crossorigin src="/assets/index-Df6fO-S6.js"></script>
8
8
  <link rel="stylesheet" crossorigin href="/assets/index-KoBceNoU.css">
9
9
  </head>
10
10
  <body>
package/dist/templates/_shared/CLAUDE.md ADDED
@@ -0,0 +1,50 @@
1
+ # HyperFrames Composition Project
2
+
3
+ ## Skills — USE THESE FIRST
4
+
5
+ **Always invoke the relevant skill before writing or modifying compositions.** Skills encode framework-specific patterns (e.g., `class="clip"`, `window.__timelines`, `data-*` attributes) that are NOT in generic web docs. Skipping them produces broken compositions.
6
+
7
+ | Skill | Command | When to use |
8
+ | -------------------- | ------------------- | ------------------------------------------------------------------------------------------------------ |
9
+ | **compose-video** | `/compose-video` | Creating or editing ANY HTML composition — videos, animations, title cards, overlays, sub-compositions |
10
+ | **captions** | `/captions` | Building captions from whisper transcripts — style detection, per-word styling |
11
+ | **gsap-core** | `/gsap-core` | GSAP tweens: `gsap.to()`, `from()`, `fromTo()`, easing, stagger, defaults |
12
+ | **gsap-timeline** | `/gsap-timeline` | Timeline sequencing, position parameter, labels, nesting |
13
+ | **gsap-performance** | `/gsap-performance` | Animation performance — transforms over layout props, will-change, batching |
14
+
15
+ > **Skills not available?** Ask the user to run `npx hyperframes skills` and restart their
16
+ > agent session, or install manually: `npx skills add heygen-com/hyperframes` and
17
+ > `npx skills add greensock/gsap-skills`.
18
+
19
+ ## Commands
20
+
21
+ ```bash
22
+ npx hyperframes dev # preview in browser (studio editor)
23
+ npx hyperframes render # render to MP4
24
+ npx hyperframes lint # validate compositions
25
+ npx hyperframes docs <topic> # reference docs in terminal
26
+ ```
27
+
28
+ Available doc topics: `data-attributes`, `gsap`, `compositions`, `rendering`, `templates`, `troubleshooting`
29
+
30
+ Full docs: [hyperframes.heygen.com](https://hyperframes.heygen.com)
31
+
32
+ ## Project Structure
33
+
34
+ - `index.html` — main composition (root timeline)
35
+ - `compositions/` — sub-compositions referenced via `data-composition-src`
36
+ - `meta.json` — project metadata (id, name)
37
+ - `transcript.json` — whisper word-level transcript (if generated)
38
+
39
+ ## Key Rules
40
+
41
+ 1. Every timed element needs `data-start`, `data-duration`, and `data-track-index`
42
+ 2. Elements with timing **MUST** have `class="clip"` — the framework uses this for visibility control
43
+ 3. Timelines must be paused and registered on `window.__timelines`:
44
+ ```js
45
+ window.__timelines = window.__timelines || {};
46
+ window.__timelines["composition-id"] = gsap.timeline({ paused: true });
47
+ ```
48
+ 4. Videos use `muted` with a separate `<audio>` element for the audio track
49
+ 5. Sub-compositions use `data-composition-src="compositions/file.html"` to reference other HTML files
50
+ 6. Only deterministic logic — no `Date.now()`, no `Math.random()`, no network fetches
package/dist/templates/blank/index.html CHANGED
@@ -1,44 +1,69 @@
1
- <div
2
- id="root"
3
- data-composition-id="main"
4
- data-start="0"
5
- data-duration="__VIDEO_DURATION__"
6
- data-width="1920"
7
- data-height="1080"
8
- >
9
- <video
10
- id="a-roll"
11
- src="__VIDEO_SRC__"
12
- muted
13
- playsinline
14
- data-start="0"
15
- data-duration="__VIDEO_DURATION__"
16
- data-track-index="0"
17
- ></video>
18
- <audio
19
- id="a-roll-audio"
20
- src="__VIDEO_SRC__"
21
- data-start="0"
22
- data-duration="__VIDEO_DURATION__"
23
- data-track-index="2"
24
- data-volume="1"
25
- ></audio>
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
+ </style>
22
+ </head>
23
+ <body>
24
+ <div
25
+ id="root"
26
+ data-composition-id="main"
27
+ data-start="0"
28
+ data-duration="__VIDEO_DURATION__"
29
+ data-width="1920"
30
+ data-height="1080"
31
+ >
32
+ <video
33
+ id="a-roll"
34
+ src="__VIDEO_SRC__"
35
+ muted
36
+ playsinline
37
+ data-start="0"
38
+ data-duration="__VIDEO_DURATION__"
39
+ data-track-index="0"
40
+ style="position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover"
41
+ ></video>
42
+ <audio
43
+ id="a-roll-audio"
44
+ src="__VIDEO_SRC__"
45
+ data-start="0"
46
+ data-duration="__VIDEO_DURATION__"
47
+ data-track-index="2"
48
+ data-volume="1"
49
+ ></audio>
26
50
 
27
- <div
28
- id="captions-comp"
29
- data-composition-id="captions"
30
- data-composition-src="compositions/captions.html"
31
- data-start="0"
32
- data-duration="__VIDEO_DURATION__"
33
- data-track-index="3"
34
- data-width="1920"
35
- data-height="1080"
36
- ></div>
51
+ <div
52
+ id="captions-comp"
53
+ data-composition-id="captions"
54
+ data-composition-src="compositions/captions.html"
55
+ data-start="0"
56
+ data-duration="__VIDEO_DURATION__"
57
+ data-track-index="3"
58
+ data-width="1920"
59
+ data-height="1080"
60
+ ></div>
61
+ </div>
37
62
 
38
- <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
39
- <script>
40
- window.__timelines = window.__timelines || {};
41
- const tl = gsap.timeline({ paused: true });
42
- window.__timelines["main"] = tl;
43
- </script>
44
- </div>
63
+ <script>
64
+ window.__timelines = window.__timelines || {};
65
+ const tl = gsap.timeline({ paused: true });
66
+ window.__timelines["main"] = tl;
67
+ </script>
68
+ </body>
69
+ </html>
package/package.json CHANGED
@@ -1,7 +1,12 @@
1
1
  {
2
2
  "name": "hyperframes",
3
- "version": "0.1.5",
3
+ "version": "0.1.7",
4
4
  "description": "HyperFrames CLI — create, preview, and render HTML video compositions",
5
+ "repository": {
6
+ "type": "git",
7
+ "url": "https://github.com/heygen-com/hyperframes",
8
+ "directory": "packages/cli"
9
+ },
5
10
  "bin": {
6
11
  "hyperframes": "./dist/cli.js"
7
12
  },
@@ -15,7 +20,7 @@
15
20
  "build:fonts": "cd ../producer && tsx scripts/generate-font-data.ts",
16
21
  "build:studio": "cd ../studio && bun run build",
17
22
  "build:runtime": "tsx scripts/build-runtime.ts",
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)",
23
+ "build:copy": "mkdir -p dist/studio dist/docs dist/templates dist/skills && 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 src/templates/_shared dist/templates/ && cp -r ../../skills/compose-video ../../skills/captions dist/skills/ && (cp src/docs/*.md dist/docs/ 2>/dev/null || true)",
19
24
  "typecheck": "tsc --noEmit"
20
25
  },
21
26
  "dependencies": {