Xuanru LiandClaude Fable 5
3e3b37d37f
* fix(cli): three occlusion-probe false-positive sources in text_occluded - pointer-events:none text is invisible to elementFromPoint, so the probe always hit whatever paints beneath and misread visible text as buried; restore hit-testing on the element for the duration of the probe - a backgroundImage counted as opaque regardless of alpha, so a 4%-alpha grid/scrim gradient qualified as an occluder; gradients now occlude only when their colours reach alpha > 0.6 (url() images unchanged) - a visible container whose every text-bearing descendant is still at opacity 0 (entrance not started) was probed anyway; skip when no text ink is on screen Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> * fix(cli): address review — document-wide hit-testing restore, gradient compositing, whitespace ink - restore hit-testing for ALL pointer-events:none elements during the text audit pass (not just the probed text): an occluder that itself carries pointer-events:none is invisible to elementFromPoint, which made truly buried text read as clean once the text alone became hittable - hasVisibleTextInk ignores whitespace-only text nodes (indented markup defeated the gate) and uses a 0.05 floor so mid-fade text keeps its persistence occurrences - hasOpaqueBackground composites gradient alpha with background-color (two 0.5-alpha layers paint at ~0.75); gradientMaxAlpha returns opaque for any colour function it cannot score (oklch/lab/...); percentage alpha values now parse as fractions Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> * fix(cli): walk the elementsFromPoint stack in occluderAt A transparent layer that becomes hittable (pointer-events restored) must not mask an opaque occluder painting beneath it — single-point elementFromPoint returned the transparent top and dropped two genuinely buried cases in the census acceptance run; the stack walk keeps 10/10. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> * fix(cli): composite stacked background-image layers when judging occluder opacity Two 0.5-alpha gradient layers paint at 0.75 combined; taking the max color-stop alpha across the whole declaration under-counted them and suppressed real text_occluded findings. Split layers at top-level commas (paren-aware), score each, composite as 1-prod(1-a_i). Also pins the 0.05 text-ink floor with a boundary test (review feedback on #2357). Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> * fix(cli): keep walking the occlusion stack past pair-specific exemptions sharedPreserve3d and isCrossSceneTransitionOverlap excuse one hit, not the whole probe; returning null let a transparent decorative layer in the text's 3D context mask a real occluder below it (review feedback). Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> --------- Co-authored-by: Claude Fable 5 <noreply@anthropic.com>
hyperframes
CLI for creating, previewing, and rendering HTML video compositions.
Install
npm install -g hyperframes
Or use directly with npx:
npx hyperframes <command>
Requirements: Node.js >= 22, FFmpeg
Commands
init
Scaffold a new Hyperframes project from a template:
npx hyperframes init my-video
cd my-video
preview
Start the live preview studio in your browser:
npx hyperframes preview
# Studio running at http://localhost:3002
npx hyperframes preview --port 4567
render
Render a composition to MP4. Run from the project directory; the positional
argument is the project directory (not a file), so render the project's
index.html directly, or point at a specific composition file with -c:
npx hyperframes render -o output.mp4
npx hyperframes render -c ./my-composition.html -o output.mp4
lint
Validate your Hyperframes HTML:
npx hyperframes lint ./my-composition
npx hyperframes lint ./my-composition --json # JSON output for CI/tooling
npx hyperframes lint ./my-composition --verbose # Include info-level findings
By default only errors and warnings are shown. Use --verbose to also display informational findings (e.g., external script dependency notices). Use --json for machine-readable output with errorCount, warningCount, infoCount, and a findings array.
compositions
List compositions found in the current project:
npx hyperframes compositions
benchmark
Run rendering benchmarks:
npx hyperframes benchmark ./my-composition.html
doctor
Check your environment for required dependencies (Chrome, FFmpeg, Node.js):
npx hyperframes doctor
browser
Manage the bundled Chrome/Chromium installation:
npx hyperframes browser
info
Print version and environment info:
npx hyperframes info
docs
Open the documentation in your browser:
npx hyperframes docs
upgrade
Check for updates and show upgrade instructions:
npx hyperframes upgrade
npx hyperframes upgrade --check --json # machine-readable for agents
Documentation
Full documentation: hyperframes.heygen.com/packages/cli
Related packages
@hyperframes/core— types, parsers, frame adapters@hyperframes/engine— rendering engine@hyperframes/producer— render pipeline@hyperframes/studio— composition editor UI