hyperframes 0.8.37 → 0.8.39
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/dist/cli.js +136 -148
- package/dist/docs/examples.md +1 -1
- package/dist/fontLocalizeCli.js +18 -95
- package/dist/hyperframes-player.global.js +1 -1
- package/dist/skills/hyperframes/SKILL.md +1 -1
- package/dist/skills/hyperframes/references/brief-contract.md +108 -0
- package/dist/skills/hyperframes/references/brief-format.md +72 -0
- package/dist/skills/hyperframes/references/capability-menu.md +1 -1
- package/dist/skills/hyperframes/references/frame-worker-core.md +80 -0
- package/dist/skills/hyperframes/references/intent-interview.md +8 -8
- package/dist/skills/hyperframes/references/production-loop.md +26 -0
- package/dist/skills/hyperframes/references/review-loop.md +41 -0
- package/dist/skills/hyperframes/references/route-briefs.md +1 -1
- package/dist/skills/hyperframes/references/script-format.md +52 -0
- package/dist/skills/hyperframes/references/storyboard-format.md +130 -0
- package/dist/skills/hyperframes/references/subagent-dispatch.md +35 -0
- package/dist/skills/hyperframes/scripts/lib/frame-packets-core.mjs +212 -0
- package/dist/skills/hyperframes-cli/SKILL.md +9 -8
- package/dist/skills/hyperframes-cli/references/init-and-scaffold.md +6 -6
- package/dist/skills/hyperframes-cli/references/preview-render.md +6 -3
- package/dist/studio/assets/{hyperframes-player-DrGk-lf5.js → hyperframes-player-BBFfad14.js} +1 -1
- package/dist/studio/assets/{index-DMsdtB-j.js → index-3XC5KvGR.js} +4 -4
- package/dist/studio/assets/{index-xK1YGiPD.js → index-CtYBUtk8.js} +1 -1
- package/dist/studio/assets/{index-BtGF7Kl-.js → index-De_8OqJf.js} +1 -1
- package/dist/studio/index.html +1 -1
- package/dist/studio/index.js +1 -1
- package/dist/studio/index.js.map +1 -1
- package/dist/templates/blank/index.html +17 -37
- package/dist/templates/from-file/index.html +74 -0
- package/package.json +1 -1
|
@@ -109,7 +109,8 @@ npx hyperframes render ./my-video --output ./out.mp4 # render from outside the
|
|
|
109
109
|
npx hyperframes render --output final.mp4 # named output (no timestamp)
|
|
110
110
|
npx hyperframes render -c compositions/intro.html -o intro.mp4 # render a specific sub-composition file
|
|
111
111
|
npx hyperframes render --quality draft # fast iteration
|
|
112
|
-
npx hyperframes render --
|
|
112
|
+
npx hyperframes render --quality looks # first real encode (default)
|
|
113
|
+
npx hyperframes render --fps 60 --quality delivery # final delivery
|
|
113
114
|
npx hyperframes render --format webm # transparent WebM
|
|
114
115
|
npx hyperframes render --docker # byte-identical
|
|
115
116
|
```
|
|
@@ -122,7 +123,7 @@ npx hyperframes render --docker # byte-identical
|
|
|
122
123
|
| `--composition`, `-c` | path to composition file | `index.html` | Render a specific composition file (e.g. `compositions/intro.html`) instead of the project's `index.html`. |
|
|
123
124
|
| `--output`, `-o` | path | `renders/<project>_<ts>.<ext>` | Output path. Default is timestamped (`<project-name>_YYYY-MM-DD_HH-MM-SS.<ext>`). |
|
|
124
125
|
| `--fps` | 24, 30, 60 | 30 | 60fps doubles render time |
|
|
125
|
-
| `--quality` | draft, standard, high
|
|
126
|
+
| `--quality` | draft, looks, delivery, standard, high | looks | `looks` is CRF 16 on the standard preset. `delivery` is `high`. draft for iterating |
|
|
126
127
|
| `--format` | mp4, webm, mov, gif, png-sequence | mp4 | WebM/MOV render with transparency; gif for inline autoplay in GitHub PRs/READMEs/docs (two-pass palette encode, fps capped at 30 — prefer `--fps 15` — no audio, 1-bit transparency only, HDR falls back to SDR); png-sequence writes RGBA frames to a directory (AE/Nuke/Fusion ingest) |
|
|
127
128
|
| `--gif-loop` | 0-65535 | 0 | GIF loop count; `0` loops forever. Only with `--format gif`. |
|
|
128
129
|
| `--resolution` | landscape, portrait, landscape-4k, portrait-4k, square, square-4k (+ aliases `1080p`, `4k`, `uhd`) | — | Supersample via Chrome `deviceScaleFactor`. Aspect ratio must match composition; scale must be an integer. Not with `--hdr`. |
|
|
@@ -142,7 +143,9 @@ npx hyperframes render --docker # byte-identical
|
|
|
142
143
|
| `--variables-file` | path | — | JSON file with variable values (alternative to `--variables`) |
|
|
143
144
|
| `--strict-variables` | flag | off | Fail render on undeclared keys or type mismatches in `--variables` |
|
|
144
145
|
|
|
145
|
-
**Quality guidance:** `draft` while iterating, `
|
|
146
|
+
**Quality guidance:** `draft` while iterating, `looks` (the default) for the first real encode, `delivery` for final delivery. `standard` and `high` still work.
|
|
147
|
+
|
|
148
|
+
**Read the summary's second line.** After the output path and size, `render` prints the capture path, GPU mode, and per-stage timings, e.g. `beginframe capture · software gpu · compile 0.7s · setup 1.1s · capture 8.1s · encode 5.8s`. `capture` is the frame loop and `setup` is calibration plus session init; the capture path reads `a|b` when parallel workers diverged, and `encode (during capture)` means the streaming encoder overlapped the loop, so do not add it to the wall time. Local GPU `auto` (the default) requests BeginFrame. If the line still says `screenshot capture` with `software gpu` on Linux, a hint under it says BeginFrame did not run (needs chrome-headless-shell, no `--resolution` upscale). It only appears when the GPU was auto-probed, never under `--docker` or `--no-browser-gpu`, where software GL is the point. Heavy compositions can stall on software GL. Do not reach for `--debug` just to learn which path ran.
|
|
146
149
|
|
|
147
150
|
**Parametrized renders:** the composition declares its variables on the `<html>` root with **`data-composition-variables`** — a JSON **array of declarations** (`{id, type, label, default}` per entry) that defines the schema. Scripts inside read the resolved values via `window.__hyperframes.getVariables()`. The CLI `--variables '{"title":"Q4 Report"}'` is a JSON **object keyed by id** that overrides those declared defaults for one render; missing keys fall through, so the same composition runs unchanged in dev preview and in production. Sub-comp hosts can also override per-instance with `data-variable-values`. See the `hyperframes-core` skill for the full pattern.
|
|
148
151
|
|
package/dist/studio/assets/{hyperframes-player-DrGk-lf5.js → hyperframes-player-BBFfad14.js}
RENAMED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var ve=Object.defineProperty;var be=(n,i,e)=>i in n?ve(n,i,{enumerable:!0,configurable:!0,writable:!0,value:e}):n[i]=e;var u=(n,i,e)=>be(n,typeof i!="symbol"?i+"":i,e);import{r as le,i as we,a as Ae}from"./index-
|
|
1
|
+
var ve=Object.defineProperty;var be=(n,i,e)=>i in n?ve(n,i,{enumerable:!0,configurable:!0,writable:!0,value:e}):n[i]=e;var u=(n,i,e)=>be(n,typeof i!="symbol"?i+"":i,e);import{r as le,i as we,a as Ae}from"./index-3XC5KvGR.js";function Ee(n){return n.hasRuntime||n.runtimeInjected?!1:!!(n.hasNestedCompositions||n.hasTimelines&&n.attempts>=5)}function V(n){return typeof n=="object"&&n!==null}function Ce(n){return V(n)&&typeof n.getDuration=="function"}function Te(n){return V(n)&&typeof n.duration=="function"&&typeof n.time=="function"&&typeof n.seek=="function"&&typeof n.play=="function"&&typeof n.pause=="function"}function Se(n){if(!/^\d+\.\d+\.\d+(?:-[0-9A-Za-z.-]+)?(?:\+[0-9A-Za-z.-]+)?$/.test(n))throw new Error(`Invalid HyperFrames runtime version: ${n}`);return`https://cdn.jsdelivr.net/npm/@hyperframes/core@${n}/dist/hyperframe.runtime.iife.js`}const H=typeof __HYPERFRAMES_RUNTIME_CDN_URL__=="string"?__HYPERFRAMES_RUNTIME_CDN_URL__:Se("0.0.0-dev");function $(n){if(n===null)return null;const i=Number.parseInt(n,10);return Number.isFinite(i)&&i>0?i:null}function Re(n){const i=(n==null?void 0:n.querySelector("[data-composition-id][data-width][data-height]"))??(n==null?void 0:n.querySelector("[data-width][data-height]"));if(!i)return null;const e=$(i.getAttribute("data-width")),t=$(i.getAttribute("data-height"));return e!==null&&t!==null?{width:e,height:t}:null}class xe{constructor(i,e){u(this,"_interval",null);u(this,"_runtimeInjected",!1);this._iframe=i,this._callbacks=e}get runtimeInjected(){return this._runtimeInjected}start(){this.stop(),this._runtimeInjected=!1;let i=0;this._interval=setInterval(()=>{var e;i++;try{const t=this._iframe.contentWindow;if(!t)return;const r=!!(t.__hf||t.__player),s=!!(t.__timelines&&Object.keys(t.__timelines).length>0),o=!!((e=this._iframe.contentDocument)!=null&&e.querySelector("[data-composition-src]"));if(Ee({hasRuntime:r,hasTimelines:s,hasNestedCompositions:o,runtimeInjected:this._runtimeInjected,attempts:i})){this._injectRuntime();return}if(this._runtimeInjected&&!r)return;const d=this._resolvePlaybackDurationAdapter(t);if(d&&d.getDuration()>0){this.stop();const p=Re(this._iframe.contentDocument);this._callbacks.onReady({duration:d.getDuration(),adapter:d,compositionSize:p});return}}catch{}i>=40&&(this.stop(),this._callbacks.onError("Composition timeline not found after 8s"))},200)}stop(){this._interval!==null&&(clearInterval(this._interval),this._interval=null)}resolveDirectTimelineAdapter(){try{const i=this._iframe.contentWindow;return i?this._resolveDirectTimelineAdapterFromWindow(i):null}catch{return null}}resolveDirectTimelineAdapterFromWindow(i){return this._resolveDirectTimelineAdapterFromWindow(i)}hasRuntimeBridge(i){return Reflect.get(i,"__hf")!==void 0||V(Reflect.get(i,"__player"))}_injectRuntime(){var i,e;this._runtimeInjected=!0;try{const t=this._iframe.contentDocument;if(!t)return;const r=t.createElement("script");r.src=H,(t.head||t.documentElement).appendChild(r),(e=(i=this._callbacks).onRuntimeInjected)==null||e.call(i)}catch{}}_resolveDirectTimelineAdapterFromWindow(i){var d,p;if(this.hasRuntimeBridge(i))return null;const e=Reflect.get(i,"__timelines");if(!V(e))return null;const t=Object.keys(e);if(t.length===0)return null;const r=(p=(d=this._iframe.contentDocument)==null?void 0:d.querySelector("[data-composition-id]"))==null?void 0:p.getAttribute("data-composition-id"),s=r&&r in e?r:t[t.length-1],o=e[s];return Te(o)?o:null}_resolvePlaybackDurationAdapter(i){const e=Reflect.get(i,"__player");if(Ce(e))return{kind:"runtime",getDuration:()=>e.getDuration()};const t=this._resolveDirectTimelineAdapterFromWindow(i);return t?{kind:"direct-timeline",timeline:t,getDuration:()=>t.duration()}:null}}const Me=`
|
|
2
2
|
:host {
|
|
3
3
|
display: block;
|
|
4
4
|
position: relative;
|