hyperframes 0.5.0-alpha.8 → 0.5.0

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 (34) hide show
  1. package/dist/cli.js +7518 -5457
  2. package/dist/commands/contrast-audit.browser.js +2 -0
  3. package/dist/docs/compositions.md +35 -7
  4. package/dist/docs/rendering.md +4 -1
  5. package/dist/hyperframe-runtime.js +82 -32
  6. package/dist/hyperframe.manifest.json +1 -1
  7. package/dist/hyperframe.runtime.iife.js +82 -32
  8. package/dist/skills/gsap/SKILL.md +30 -1
  9. package/dist/skills/hyperframes/SKILL.md +165 -39
  10. package/dist/skills/hyperframes/house-style.md +3 -1
  11. package/dist/skills/hyperframes/patterns.md +73 -0
  12. package/dist/skills/hyperframes/references/beat-direction.md +102 -0
  13. package/dist/skills/hyperframes/references/design-picker.md +117 -0
  14. package/dist/skills/hyperframes/references/motion-principles.md +73 -0
  15. package/dist/skills/hyperframes/references/narration.md +92 -0
  16. package/dist/skills/hyperframes/references/prompt-expansion.md +68 -0
  17. package/dist/skills/hyperframes/references/techniques.md +387 -0
  18. package/dist/skills/hyperframes/references/transcript-guide.md +1 -45
  19. package/dist/skills/hyperframes/references/video-composition.md +62 -0
  20. package/dist/skills/hyperframes/scripts/contrast-report.mjs +10 -0
  21. package/dist/skills/hyperframes/templates/design-picker.html +1432 -0
  22. package/dist/skills/hyperframes/visual-styles.md +339 -107
  23. package/dist/skills/hyperframes-cli/SKILL.md +21 -27
  24. package/dist/studio/assets/hyperframes-player-CoI5h1xv.js +353 -0
  25. package/dist/studio/assets/index-BKjcNNNd.css +1 -0
  26. package/dist/studio/assets/index-CqiisJmo.js +93 -0
  27. package/dist/studio/index.html +2 -2
  28. package/dist/templates/_shared/AGENTS.md +7 -7
  29. package/dist/templates/_shared/CLAUDE.md +15 -7
  30. package/package.json +4 -2
  31. package/dist/skills/hyperframes/references/tts.md +0 -75
  32. package/dist/studio/assets/hyperframes-player-vibA20NC.js +0 -198
  33. package/dist/studio/assets/index-0Zt0t13W.css +0 -1
  34. package/dist/studio/assets/index-C9f5eif8.js +0 -105
package/dist/commands/contrast-audit.browser.js CHANGED
@@ -90,6 +90,7 @@ window.__contrastAudit = async function (imgBase64, time) {
90
90
  if (parseFloat(cs.opacity) <= 0.01) continue;
91
91
  var rect = el.getBoundingClientRect();
92
92
  if (rect.width < 8 || rect.height < 8) continue;
93
+ if (rect.right <= 0 || rect.bottom <= 0 || rect.left >= w || rect.top >= h) continue;
93
94
 
94
95
  var fg = parseColor(cs.color);
95
96
  if (fg[3] <= 0.01) continue;
@@ -103,6 +104,7 @@ window.__contrastAudit = async function (imgBase64, time) {
103
104
  var y0 = Math.max(0, Math.floor(rect.y) - 4);
104
105
  var y1 = Math.min(h - 1, Math.ceil(rect.y + rect.height) + 4);
105
106
  var sample = function (sx, sy) {
107
+ if (sx < 0 || sx >= w || sy < 0 || sy >= h) return;
106
108
  var idx = (sy * w + sx) * 4;
107
109
  rr.push(px[idx]);
108
110
  gg.push(px[idx + 1]);
package/dist/docs/compositions.md CHANGED
@@ -26,14 +26,42 @@ Use `npx hyperframes compositions` to see all compositions in a project.
26
26
 
27
27
  ## Variables
28
28
 
29
- HyperFrames does not automatically bind `data-var-*` attributes into your composition DOM.
29
+ Two attributes with different shapes and different jobs:
30
+
31
+ - **`data-composition-variables`** on the `<html>` root — a JSON **array of declarations** (`{id, type, label, default}` per entry). Defines the schema: which variables exist, what type they are, and what defaults to use when no override is provided.
32
+ - **`data-variable-values`** on a sub-comp host element — a JSON **object keyed by variable id** (`{"title":"Pro","price":"$29"}`). Carries per-instance overrides for that one mount of the sub-composition.
33
+
34
+ They aren't redundant — one is "what variables does this composition have?" and the other is "what values should this particular embed use?" Inside any composition script, `window.__hyperframes.getVariables()` returns the merged result. Layering, lowest to highest precedence:
35
+
36
+ 1. Declared defaults from `data-composition-variables`
37
+ 2. Per-instance overrides from the host's `data-variable-values` (sub-comp embeds only)
38
+ 3. CLI overrides from `npx hyperframes render --variables '{...}'` (top-level renders only)
39
+
40
+ ```html
41
+ <!-- compositions/card.html -->
42
+ <html data-composition-variables='[
43
+ {"id":"title","type":"string","label":"Title","default":"Hello"},
44
+ {"id":"color","type":"color","label":"Color","default":"#111827"}
45
+ ]'>
46
+ <body>
47
+ <div data-composition-id="card" data-width="1920" data-height="1080">
48
+ <h1 class="title"></h1>
49
+ <script>
50
+ const { title, color } = window.__hyperframes.getVariables();
51
+ document.querySelector(".title").textContent = title;
52
+ document.querySelector(".title").style.color = color;
53
+ </script>
54
+ </div>
55
+ </body>
56
+ </html>
57
+ ```
30
58
 
31
59
  ```html
32
- <div
33
- data-composition-id="card"
34
- data-composition-src="compositions/card.html"
35
- data-variable-values='{"title":"Hello","color":"#ff4d4f"}'
36
- ></div>
60
+ <!-- index.html — embed twice with different per-instance values -->
61
+ <div data-composition-id="card-pro" data-composition-src="compositions/card.html"
62
+ data-variable-values='{"title":"Pro","color":"#ff4d4f"}'></div>
63
+ <div data-composition-id="card-enterprise" data-composition-src="compositions/card.html"
64
+ data-variable-values='{"title":"Enterprise","color":"#22c55e"}'></div>
37
65
  ```
38
66
 
39
- Read `data-variable-values` inside the nested composition and apply the values in your own script. Variable metadata for tooling is declared separately via `data-composition-variables` and read with `extractCompositionMetadata()`.
67
+ The runtime layers `data-variable-values` over the sub-comp's declared defaults on a per-instance basis. The same `getVariables()` call works at the top level too — the CLI flag `--variables` provides the override, declared `default`s fall through for missing keys.
package/dist/docs/rendering.md CHANGED
@@ -19,11 +19,14 @@ Requires: Docker installed and running.
19
19
  - `-w, --workers` — Parallel workers 1-8 (default: auto)
20
20
  - `--crf` — Override encoder CRF (mutually exclusive with `--video-bitrate`)
21
21
  - `--video-bitrate` — Target video bitrate such as `10M` (mutually exclusive with `--crf`)
22
- - `--gpu` — Use GPU encoding (NVENC, VideoToolbox, VAAPI)
22
+ - `--gpu` — Use GPU encoding (NVENC, VideoToolbox, VAAPI, QSV)
23
+ - `--browser-gpu` / `--no-browser-gpu` — Use or opt out of host GPU acceleration for local Chrome/WebGL capture (enabled by default for local renders, disabled in Docker)
23
24
  - `-o, --output` — Custom output path
24
25
 
25
26
  ## Tips
26
27
 
27
28
  - Use `draft` quality for fast previews during development
29
+ - Local renders use browser GPU capture automatically; use `--no-browser-gpu` to compare against the software-browser path
30
+ - Use `--gpu` when a local render also benefits from hardware FFmpeg encoding
28
31
  - Use `npx hyperframes benchmark` to find optimal settings
29
32
  - 4 workers is usually the sweet spot for most compositions