hyperframes 0.7.49 → 0.7.50

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.
@@ -32,7 +32,7 @@ Atomic capabilities you load **on demand** — not full workflows; they never ow
32
32
  | **Author seek-safe keyframes** — GSAP timelines, CSS keyframes, Anime.js, WAAPI, FLIP, paths, masks, SVG morph/draw, 3D depth, plus `hyperframes keyframes` diagnostics | `/hyperframes-keyframes` |
33
33
  | **Creative direction** — `frame.md` / `design.md`, palettes, typography, narration, beat planning, audio-reactive | `/hyperframes-creative` |
34
34
  | **Media** — resolve/generate BGM, SFX, image, icon, brand logo, voice, color grade, LUT; TTS voiceover, transcription, background removal, captions; cross-project reuse | `/media-use` |
35
- | **CLI dev loop** — init, lint, validate, inspect, preview, render, publish, doctor | `/hyperframes-cli` |
35
+ | **CLI dev loop** — init, lint, check, snapshot, preview, render, publish, doctor | `/hyperframes-cli` |
36
36
  | **Install registry blocks / components** (`hyperframes add`) | `/hyperframes-registry` |
37
37
  | **Import Figma content** — assets, tokens, components, storyboards→reconstructed motion (REST/CLI); Motion (MCP), shaders (MCP source / native export) | `/figma` |
38
38
 
@@ -1,6 +1,6 @@
1
1
  ---
2
2
  name: hyperframes-cli
3
- description: HyperFrames CLI dev loop. Use when running npx hyperframes init, add, catalog, capture, lint, validate, inspect, layout, snapshot, compare, grade-compare, preview, play, render, publish, feedback, lambda, doctor, browser, info, upgrade, skills, compositions, docs, benchmark, telemetry, transcribe, tts, or remove-background, or when troubleshooting the HyperFrames build/render environment. Entry point for AWS Lambda cloud rendering (`hyperframes lambda deploy / render / progress / destroy / policies / sites`).
3
+ description: HyperFrames CLI dev loop. Use when running npx hyperframes init, add, catalog, capture, lint, check, snapshot, compare, grade-compare, preview, play, render, publish, feedback, lambda, doctor, browser, info, upgrade, skills, compositions, docs, benchmark, telemetry, transcribe, tts, or remove-background (validate/inspect/layout are deprecated aliases covered by check), or when troubleshooting the HyperFrames build/render environment. Entry point for AWS Lambda cloud rendering (`hyperframes lambda deploy / render / progress / destroy / policies / sites`).
4
4
  ---
5
5
 
6
6
  # HyperFrames CLI
@@ -11,18 +11,17 @@ Everything runs through `npx hyperframes` unless project instructions specify a
11
11
 
12
12
  1. **Scaffold** — `npx hyperframes init my-video` (or `capture` from a URL). `init` also checks the installed skills against the latest on GitHub and updates the global set if any are out of date. The `--skip-skills` flag is currently neutered (temporary, while the skills.sh registry catches up), so every `init` runs this check and pulls our latest skills regardless.
13
13
  2. **Write** — author HTML composition (see the `hyperframes-core` skill)
14
- 3. **Lint** — `npx hyperframes lint`
15
- 4. **Validate** — `npx hyperframes validate` (runtime errors + contrast)
16
- 5. **Visual inspect** — `npx hyperframes inspect`
17
- 6. **Preview / edit** — `npx hyperframes preview` opens **Studio**, the timeline editor where the user can manually edit anything (not just watch). Review there, then ask before rendering.
18
- 7. **Render** — pick the variant:
14
+ 3. **Lint** — `npx hyperframes lint` (static, fast — run it early while iterating)
15
+ 4. **Check** — `npx hyperframes check` (the browser gate; add `--snapshots` for annotated frames + per-finding crops)
16
+ 5. **Preview / edit** — `npx hyperframes preview` opens **Studio**, the timeline editor where the user can manually edit anything (not just watch). Review there, then ask before rendering.
17
+ 6. **Render** — pick the variant:
19
18
  - Iterate: `npx hyperframes render --quality draft`
20
19
  - Deliver: `npx hyperframes render --quality high --output out.mp4`
21
20
  - CI / cross-host repro: `npx hyperframes render --docker --strict --output out.mp4`
22
21
  - Cloud (long / large): `npx hyperframes lambda render ./my-project --width 1920 --height 1080 --wait` (see Lambda below)
23
- 8. **Report feedback** — after verifying the output, `npx hyperframes feedback --rating <1-5> --comment "..."` once per task (see Agent Conventions).
22
+ 7. **Report feedback** — after verifying the output, `npx hyperframes feedback --rating <1-5> --comment "..."` once per task (see Agent Conventions).
24
23
 
25
- Run lint, validate, and inspect before preview. `lint` catches missing `data-composition-id`, overlapping tracks, and unregistered timelines. `validate` loads the composition in headless Chrome and reports runtime console errors plus WCAG contrast issues. `inspect` seeks through the timeline and reports text spilling out of bubbles/containers or off the canvas and, when a `*.motion.json` sidecar is present, verifies motion intent (entrances firing under seek, stagger order, in-frame, liveness) against that same seeked timeline.
24
+ Run `check` before preview. It runs the linter first (and skips the browser entirely on lint errors), then does everything the old validate inspect snapshot sequence did in **one** browser session and one seek pass: runtime console errors and failed requests, layout defects (text spilling out of bubbles/containers or off canvas, held overlaps, occlusion), motion-sidecar verification (`*.motion.json` entrances under seek, stagger order, in-frame, liveness), and WCAG contrast. Contrast failures are errors and carry the sampled fg/bg colors, measured vs required ratio, and a suggested compliant color, so most contrast fixes need no screenshot. Every finding carries a selector, `data-*` identity, composition source file, bbox, and sample time — jump straight to the HTML. Single-sample transients demote to info; findings held across samples gate the exit code (`--strict` gates warnings too). `validate`, `inspect`, and `layout` still work but are deprecated aliases of parts of `check`.
26
25
 
27
26
  For motion-heavy work, prefer snapshot-driven iteration and a `*.motion.json` sidecar — see `references/lint-validate-inspect.md` for the discipline and motion-verification spec. To compare agent-authored candidate variants, use `npx hyperframes compare <path...> [--at <sec>] [--labels a,b,c] [--out compare.png] [--cols n] [--json]` to render each composition through its own runtime, assemble one labeled sheet, inspect it side by side, and choose. For color-grade selection, use the color-specific sibling `npx hyperframes grade-compare --for <frame> --grades grades.json` (or `--luts a.cube,b.cube`) to render every grading candidate through the real WebGL grading runtime into one labeled PNG before choosing the winner.
28
27
 
@@ -34,6 +33,7 @@ Cross-cutting rules that hold for every command:
34
33
  - **`doctor --json` always exits 0**, even when the environment is broken. Gate on the payload's `ok` field: `npx hyperframes doctor --json | jq -e '.ok' > /dev/null`. This insulates pipelines from CLI release churn.
35
34
  - **Non-TTY mode is auto-detected.** When `stdout` is not a TTY (CI, agents, piped output) the CLI auto-switches to non-interactive; `init` then **requires `--example`**. Pass `--non-interactive` to force this mode even on a TTY.
36
35
  - **CI gating on render**: `--strict` fails on lint errors, `--strict-all` fails on warnings too, `--strict-variables` fails on undeclared `--variables` keys.
36
+ - **Correlate a verify loop with `HYPERFRAMES_RUN_ID`.** Orchestrators driving the CLI per task/design element should set this env var once per unit of work; every command invocation attaches it to telemetry, and `check` emits a per-gate breakdown, making roundtrips-per-task measurable.
37
37
  - **Paths in `--json` are redacted** — `$HOME` becomes the literal `$HOME` so output is safe to paste into bug reports and agent contexts.
38
38
  - **Render is user-gated.** Never auto-render once the checks pass. Pause at `preview`, tell the user the video is editable in Studio, and render only after they approve.
39
39
  - **Use Studio context for user-directed edits.** When the user says "this selected element", "the thing I clicked", "current selection", or similar, ask them to select it in Studio, then run `npx hyperframes preview --context --json --context-fields selection`. Use the returned `selection.target.hfId` / `selector`, `selection.sourceFile`, `selection.currentTime`, and `selection.thumbnailUrl` to anchor the edit. If `selection` is `null` and `errors.selection.code` is `no-selection`, ask the user to click the element and rerun; do not guess from screenshots.
@@ -46,7 +46,7 @@ Cross-cutting rules that hold for every command:
46
46
  | Want to… | Read |
47
47
  | ---------------------------------------------------------------------------------------------------------- | ------------------------------------- |
48
48
  | Scaffold a project (`init`, `capture`, `skills`) | `references/init-and-scaffold.md` |
49
- | Check correctness (`lint`, `validate`, `inspect`, `snapshot`) | `references/lint-validate-inspect.md` |
49
+ | Check correctness (`lint`, `check`, `snapshot`, deprecated `validate`/`inspect`) | `references/lint-validate-inspect.md` |
50
50
  | Preview or render (`preview`, `play`, `render`, `publish`) | `references/preview-render.md` |
51
51
  | Diagnose the environment (`doctor`, `browser`) | `references/doctor-browser.md` |
52
52
  | Cloud render on AWS Lambda (`lambda deploy / sites / render / progress / destroy / policies`) | `references/lambda.md` |
@@ -75,18 +75,15 @@ See `references/lambda.md` for prerequisites, all 6 subcommands (`deploy`, `site
75
75
 
76
76
  ## Minimum Completion Gate
77
77
 
78
- ### Static gates
79
-
80
78
  ```bash
81
- npx hyperframes lint
82
- npx hyperframes validate
79
+ npx hyperframes check
83
80
  ```
84
81
 
85
- Add `inspect` for layout-sensitive work and `render --strict` in CI to fail on lint errors.
82
+ One command covers the old lint + validate + inspect sequence in one browser session. Add `--strict` to gate warnings and `render --strict` in CI to fail on lint errors. `--caption-zone "<x0=..;y0=..;x1=..;y1=..>"` and `--frame-check` add opt-in band/bounds gates for pipelines that need them.
86
83
 
87
84
  ### Visual smoke test — required when the project uses sub-compositions
88
85
 
89
- `lint` / `validate` / `inspect` evaluate each composition **in isolation**. They never load `index.html` and mount sub-compositions via `data-composition-src`, so they cannot catch cross-file mount failures (see `hyperframes-core` → `references/sub-compositions.md`, "Common pitfalls"). The only gate that catches them is one that actually loads `index.html` and seeks the timeline.
86
+ The audits evaluate the bundled composition; they cannot catch every cross-file mount failure when `index.html` mounts sub-compositions via `data-composition-src` (see `hyperframes-core` → `references/sub-compositions.md`, "Common pitfalls"). The gate that catches those is one that actually loads `index.html` the way `render` does and seeks the timeline.
90
87
 
91
88
  Use `hyperframes snapshot` — it loads the project the same way `render` does (so it exercises the same mount path) but only captures the timestamps you request, so it's seconds instead of a full render:
92
89
 
@@ -1,16 +1,16 @@
1
- # lint, validate, inspect, snapshot
1
+ # lint, check, snapshot
2
2
 
3
- The correctness pipeline. Run in this order: `lint` (static, fast) `validate` (runtime, headless Chrome) `inspect` (layout sweep). `snapshot` is a separate utility for capturing still frames.
3
+ The correctness pipeline: `lint` (static, fast) while iterating, then `check` (one browser session: runtime + layout + motion + contrast) as the gate. `snapshot` is the standalone utility for capturing still frames and zoomed crops. `validate`, `inspect`, and `layout` still run but are deprecated: `check` covers all of them in one invocation.
4
4
 
5
5
  ## Discipline (motion-heavy work)
6
6
 
7
7
  When the composition is animation-driven, run the checks before you reach for `preview` or `render`:
8
8
 
9
- - Run `lint` after the first HTML pass earlier, not later.
10
- - Capture `snapshot` at meaningful timeline states; look at the PNGs.
11
- - Inspect snapshots _before_ tuning automated warnings your eye catches what the auditor misses.
12
- - Treat layout warnings as defects unless a snapshot proves the overflow is intentional, in which case mark it with `data-layout-allow-overflow`.
13
- - State motion intent in a `*.motion.json` sidecar so `inspect` checks it automatically entrances firing under seek, stagger order, in-frame, liveness. This is the closest automated proxy for "watch the MP4" and catches render-≠-preview bugs the eye misses (see **Motion verification** below).
9
+ - Run `lint` after the first HTML pass, earlier rather than later.
10
+ - Run `check --snapshots` at the first full pass: the overview frames and per-finding crops show you what the auditor saw.
11
+ - Look at the PNGs before tuning automated warnings: your eye catches what the auditor misses, and the auditor catches what your eye misses.
12
+ - Treat layout errors as defects unless a snapshot proves the layering is intentional, in which case mark it with `data-layout-allow-overflow` / `data-layout-allow-overlap` / `data-layout-allow-occlusion`.
13
+ - State motion intent in a `*.motion.json` sidecar so `check` verifies it automatically (entrances firing under seek, stagger order, in-frame, liveness). This is the closest automated proxy for "watch the MP4" and catches render-vs-preview bugs the eye misses (see **Motion verification** below).
14
14
 
15
15
  ## lint
16
16
 
@@ -21,9 +21,9 @@ npx hyperframes lint --verbose # info-level findings
21
21
  npx hyperframes lint --json # machine-readable
22
22
  ```
23
23
 
24
- Lints `index.html` and all files in `compositions/`. Reports errors (must fix), warnings (should fix), and info (with `--verbose`). Catches missing `data-composition-id`, overlapping tracks on the same `data-track-index`, and unregistered timelines.
24
+ Lints `index.html` and all files in `compositions/`. Reports errors (must fix), warnings (should fix), and info (with `--verbose`). Catches missing `data-composition-id`, overlapping tracks on the same `data-track-index`, unregistered timelines, and GSAP/CSS transform conflicts.
25
25
 
26
- **Blind spot — media inside a sub-composition (not yet a lint rule).** A `<video>`/`<audio>` inside a `compositions/*.html` `<template>` (or nested in a wrapper `<div>` anywhere) is never seeked/decoded and renders blank/black; `lint`/`validate`/`inspect` all pass. Media must be a direct child of the host root (`index.html`) — see `hyperframes-core` → `variables-and-media.md`. Until a rule exists, check manually before render:
26
+ **Blind spot — media inside a sub-composition (not yet a lint rule).** A `<video>`/`<audio>` inside a `compositions/*.html` `<template>` (or nested in a wrapper `<div>` anywhere) is never seeked/decoded and renders blank/black; the automated checks all pass. Media must be a direct child of the host root (`index.html`) — see `hyperframes-core` → `variables-and-media.md`. Until a rule exists, check manually before render:
27
27
 
28
28
  ```bash
29
29
  grep -nE '<(video|audio)\b' compositions/*.html # expect NO matches; media belongs in index.html
@@ -31,63 +31,56 @@ grep -nE '<(video|audio)\b' compositions/*.html # expect NO matches; media bel
31
31
 
32
32
  A non-empty result is a defect. Then `snapshot` each scene that has a video and confirm the panel actually shows footage (a blank/black panel where a clip should play is a bug, not a placeholder — treat it as render-blocking).
33
33
 
34
- ## validate
34
+ ## check
35
35
 
36
36
  ```bash
37
- npx hyperframes validate # current directory
38
- npx hyperframes validate ./my-project # specific project
39
- npx hyperframes validate --json # agent-readable findings
40
- npx hyperframes validate --timeout 5000 # ms to wait for scripts (default 3000)
41
- npx hyperframes validate --no-contrast # skip WCAG contrast audit while iterating
37
+ npx hyperframes check # current directory: the full browser gate
38
+ npx hyperframes check ./my-project # specific project
39
+ npx hyperframes check --json # agent-readable envelope {ok, lint, runtime, layout, motion, contrast, snapshots}
40
+ npx hyperframes check --snapshots # also write overview frames (annotated) + per-finding crops
41
+ npx hyperframes check --samples 15 # denser timeline sweep (default 9)
42
+ npx hyperframes check --at 1.5,4,7.25 # explicit hero-frame timestamps
43
+ npx hyperframes check --at-transitions # also sample every tween start/end boundary
44
+ npx hyperframes check --tolerance 4 # allowed overflow px before reporting (default 2)
45
+ npx hyperframes check --timeout 5000 # ms for the initial settle (default 3000)
46
+ npx hyperframes check --no-contrast # skip the WCAG audit while iterating
47
+ npx hyperframes check --strict # exit non-zero on warnings too (default: only errors)
42
48
  ```
43
49
 
44
- Static lint is fast but blind to runtime failures. `validate` loads the composition in headless Chrome, plays through it, and reports:
50
+ One command, one Chrome boot. `check` runs the linter first and skips the browser entirely when lint reports errors. Then it loads the bundled composition once, wires runtime listeners before navigation, and sweeps one seek grid running every audit per sample:
45
51
 
46
- - JavaScript console errors and unhandled exceptions
47
- - Failed network requests (media-file `ERR_ABORTED` filtered out)
48
- - WCAG AA contrast violations on visible text sampled at 5 timestamps across the timeline. Disable with `--no-contrast`.
52
+ - **Runtime**: JavaScript console errors, unhandled exceptions, failed network requests (media-file `ERR_ABORTED` filtered out), HTTP 4xx/5xx.
53
+ - **Layout**: text extending outside its container or the canvas, text clipped by its own box, held text overlaps and occlusion (with an approximate covered fraction), children escaping clipping containers.
54
+ - **Motion**: `*.motion.json` sidecar assertions against the same seeked timeline (see below).
55
+ - **Contrast**: WCAG AA on visible text, sampled at 5 grid points. Failures are **errors** and each finding carries the sampled fg/bg colors, measured vs required ratio, and a suggested compliant color in the same palette direction, so most contrast fixes need no screenshot at all.
49
56
 
50
- **Fixing contrast warnings** thresholds are 4.5:1 for normal text, 3:1 for large text (24px+, or 19px+ bold):
57
+ Every finding carries a selector, the element's `data-*` identity, the composition source file, a bbox, and the sample time: jump straight from the JSON to the HTML you must edit and re-run.
51
58
 
52
- - On dark backgrounds, brighten the failing color until it clears the threshold; on light backgrounds, darken it.
53
- - Stay within the palette family — don't invent a new color, adjust the existing one.
54
- - Re-run `validate` until clean.
59
+ **Severity is persistence-aware.** A dynamic issue observed at a single grid sample (an entrance/exit transient) demotes to info and never gates. Issues held across samples gate the exit code, and a held `content_overlap` is an error. If a 3s+ composition shows zero geometry change across every sample, `check` fails with `sweep_static`: a frozen timeline makes every green verdict unreliable, so it refuses to pass.
55
60
 
56
- Run `validate` before `inspect` when an animation has scripts, fetched data, or theming. Combine with `render --strict` in CI.
61
+ **Escape hatches** (mark intent in the HTML, then re-run):
57
62
 
58
- ## inspect
63
+ - `data-layout-allow-overflow` — overflow is intentional (entrance/exit travel).
64
+ - `data-layout-allow-overlap` — deliberate text layering (e.g. a demo cursor label over a heading).
65
+ - `data-layout-allow-occlusion` — an element is meant to cover text.
66
+ - `data-layout-ignore` — decorative element that should never be audited.
67
+
68
+ **Opt-in pipeline gates** (used by orchestrators; off by default):
59
69
 
60
70
  ```bash
61
- npx hyperframes inspect # inspect rendered layout over the timeline
62
- npx hyperframes inspect ./my-project # specific project
63
- npx hyperframes inspect --json # agent-readable findings (schemaVersion, samples, issues, bboxes)
64
- npx hyperframes inspect --samples 15 # denser timeline sweep (default 9)
65
- npx hyperframes inspect --at 1.5,4,7.25 # explicit hero-frame timestamps
66
- npx hyperframes inspect --tolerance 4 # allowed overflow in px before reporting (default 2)
67
- npx hyperframes inspect --strict # exit non-zero on warnings too (default: only errors)
71
+ npx hyperframes check --caption-zone "x0=0;y0=.82;x1=1;y1=1;severity=error;seek=.25,1"
72
+ npx hyperframes check --frame-check # media (img/svg/video/canvas) out-of-frame detection
68
73
  ```
69
74
 
70
- Use this after `lint` and `validate`, especially for compositions with speech bubbles, cards, captions, or tight typography. It reports:
71
-
72
- - Text extending outside the nearest visual container or bubble
73
- - Text clipped by its own fixed-width/fixed-height box
74
- - Text extending outside the composition canvas
75
- - Children escaping clipping containers
76
-
77
- Errors should be fixed before rendering. Warnings are surfaced for agent review; add `--strict` to fail on warnings too. Repeated static issues are collapsed by default so JSON output stays compact for LLM context windows.
78
-
79
- **Escape hatches:**
75
+ `--caption-zone` takes fractional band geometry (`x0/y0/x1/y1` required, 0-1 fractions of the composition's own canvas, portrait included) with optional `severity` and comma-separated `seek` fractions; it flags content whose center sits inside the band. `--frame-check` reports media elements breaching the canvas beyond `max(120px, 6% of the min canvas dimension)`.
80
76
 
81
- - `data-layout-allow-overflow` mark an element or ancestor when overflow is intentional for an entrance/exit animation.
82
- - `data-layout-ignore` — mark a decorative element that should never be audited.
77
+ **Fixing contrast errors** — thresholds are 4.5:1 for normal text, 3:1 for large text (24px+, or 19px+ bold). The finding's `suggestedColor` already picks the nearest compliant color in the right direction (brighten on dark backgrounds, darken on light); apply it or adjust within the palette family, then re-run `check`.
83
78
 
84
- `npx hyperframes layout` remains available as a compatibility alias for the same visual inspection pass.
79
+ ## Motion verification (`*.motion.json` sidecar)
85
80
 
86
- ### Motion verification (`*.motion.json` sidecar)
81
+ `check` verifies **motion intent** against the same seeked timeline the renderer uses — the closest automated proxy for "render the MP4 and watch it". It catches render-vs-preview bugs layout sampling can't: an entrance reveal the seek lands past, a broken stagger order, an element drifting off-frame mid-tween, a frozen shot.
87
82
 
88
- `inspect` also checks **motion intent** against the same seeked timeline the renderer uses the closest automated proxy for "render the MP4 and watch it". It catches render-≠-preview bugs layout sampling can't: an entrance reveal the seek lands past, a broken stagger order, an element drifting off-frame mid-tween, a frozen shot.
89
-
90
- Drop a `*.motion.json` sidecar next to the composition (matching the html basename when several compositions share a dir). `inspect` discovers it automatically — no flag, no authoring-framework changes. With no sidecar, `inspect` behaves exactly as before.
83
+ Drop a `*.motion.json` sidecar next to the composition (matching the html basename when several compositions share a dir). `check` discovers it automatically no flag, no authoring-framework changes. With no sidecar, `check` behaves exactly as before.
91
84
 
92
85
  ```json
93
86
  {
@@ -108,7 +101,7 @@ Drop a `*.motion.json` sidecar next to the composition (matching the html basena
108
101
  | `staysInFrame(selector)` | once visible, its box leaves the canvas — `motion_off_frame` |
109
102
  | `keepsMoving(withinSelector?)` | a fully-static window exceeds `maxStaticSec` (default 2s) — `motion_frozen` |
110
103
 
111
- `duration`, `withinSelector`, and `maxStaticSec` are optional. Findings are **errors by default** (a failed assertion fails the run, like a layout error — `--strict` still gates warnings) and appear in the same human and `--json` output as layout findings. A selector that matches nothing is reported as `motion_selector_missing` rather than silently passing — so a typo'd selector fails loudly. Use this in the feedback loop instead of eyeballing the render: assert what the motion is supposed to do, and let `inspect` tell you when the seek diverges from intent.
104
+ `duration`, `withinSelector`, and `maxStaticSec` are optional. Findings are **errors by default** and appear in the same human and `--json` output as layout findings. A selector that matches nothing is reported as `motion_selector_missing` rather than silently passing — a typo'd selector fails loudly. Use this in the feedback loop instead of eyeballing the render: assert what the motion is supposed to do, and let `check` tell you when the seek diverges from intent.
112
105
 
113
106
  ## snapshot
114
107
 
@@ -118,4 +111,27 @@ npx hyperframes snapshot ./my-project # specific project
118
111
  npx hyperframes snapshot --frames 10 # evenly-spaced N frames
119
112
  ```
120
113
 
121
- Captures still PNGs from the composition for visual diffing, thumbnails, or attaching to a PR. Faster than rendering a video when you only need a few hero frames. Output lands in the project's snapshots directory.
114
+ Captures still PNGs from the composition for visual diffing, thumbnails, or attaching to a PR. Faster than rendering a video when you only need a few hero frames. Output lands in the project's snapshots directory. Not deprecated: it remains the standalone capture utility, while `check --snapshots` covers the gate's needs (overview frames annotated with labeled finding boxes, plus `finding-NN-<code>.png` crops for every error finding with a bbox).
115
+
116
+ ### Zooming into a reported finding
117
+
118
+ `hyperframes check --snapshots` already writes a `finding-NN-<code>.png` crop for every error finding that carries a bbox, but the same zoom is available standalone once you know what to look at:
119
+
120
+ ```bash
121
+ npx hyperframes check --snapshots # reports a finding, e.g. content_overlap on "#cta"
122
+ npx hyperframes snapshot --zoom "#cta" # crop the element to verify the defect, at 3x density
123
+ npx hyperframes snapshot --zoom "100,50,400,300" --zoom-scale 2 # or an exact pixel region
124
+ # fix the composition HTML, then re-check:
125
+ npx hyperframes check
126
+ ```
127
+
128
+ `--zoom` takes a CSS selector or an exact `x,y,w,h` pixel region and always produces a real high-density crop (a raised `deviceScaleFactor`, never CSS zoom or a viewport resize), so the composition's layout — and its render determinism — is untouched. A selector matching nothing is a loud error, not a silent full-frame fallback, and a frame where the target has no visible box (collapsed or animated off-canvas) is skipped with a note instead of written as a sliver.
129
+
130
+ ## Deprecated: validate, inspect, layout
131
+
132
+ All three keep working, print a deprecation notice on stderr, and mark `_meta.deprecated: true` in `--json`. Their functionality lives in `check`:
133
+
134
+ - `validate` (runtime errors + contrast) → `check` (contrast failures are now gating errors with fix payloads, not warnings).
135
+ - `inspect` / `layout` (layout sweep + motion sidecar) → `check` (same flags: `--samples`, `--at`, `--at-transitions`, `--tolerance`, `--strict`).
136
+
137
+ Migrate scripts by replacing the sequence with the single `check` invocation; scaffolded projects' `npm run check` already points there.