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.
@@ -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-BEwJNmPo.js"></script>
8
- <link rel="stylesheet" crossorigin href="/assets/index-BnvciBdD.css">
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` | Building captions from whisper transcripts style detection, per-word styling |
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.12",
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"