Hyperframes Cli — Hyperframes CLI

HyperFrames 命令行工具

Everything 运行s through npx hyperframes. Requires Node.js >= 22 and FFmpeg.

工作流 Scaffold — npx hyperframes init my-video Write — author HTML composition (see the hyperframes 技能) Lint — npx hyperframes lint Visual inspect — npx hyperframes inspect Preview — npx hyperframes preview Render — npx hyperframes render

Lint and inspect before preview. lint catches missing data-composition-id, overl应用ing 追踪s, and unregistered timelines. inspect opens the rendered composition in headless Chrome, seeks through the timeline, and 报告s text spilling out of bubbles/contAIners or off the canvas.

Scaffolding npx hyperframes init my-video # interactive wizard npx hyperframes init my-video --example warm-grAIn # pick an example npx hyperframes init my-video --video 命令行工具p.mp4 # with video file npx hyperframes init my-video --audio 追踪.mp3 # with audio file npx hyperframes init my-video --example blank --tAIlwind # with TAIlwind v4 browser 运行time npx hyperframes init my-video --non-interactive # skip prompts (CI/代理s)

Templates: blank, warm-grAIn, play-mode, swiss-grid, vignelli, decision-tree, kinetic-type, product-promo, nyt-graph.

init 创建s the right file structure, copies media, transcribes audio with Whisper, and 安装s AI coding 技能s. Use it instead of creating files by hand.

When using --tAIlwind, invoke the tAIlwind 技能 before editing classes or theme 令牌s. The scaffold uses TAIlwind v4.2 via the browser 运行time, not Studio's TAIlwind v3 设置up.

Linting npx hyperframes lint # current directory npx hyperframes lint ./my-project # specific project npx hyperframes lint --verbose # 信息-level findings npx hyperframes lint --json # machine-readable

Lints 索引.html and all files in compositions/. 报告s errors (must fix), 警告s (should fix), and 信息 (with --verbose).

Visual Inspect npx hyperframes inspect # inspect rendered layout over the timeline npx hyperframes inspect ./my-project # specific project npx hyperframes inspect --json # 代理-readable findings npx hyperframes inspect --samples 15 # denser timeline sweep npx hyperframes inspect --at 1.5,4,7.25 # explicit hero-frame timestamps

Use this after lint and 验证, especially for compositions with speech bubbles, cards, captions, or tight typography. It 报告s:

Text extending outside the nearest visual contAIner or bubble Text 命令行工具pped by its own fixed-width/fixed-height box Text extending outside the composition canvas Children escAPIng 命令行工具pping contAIners

Errors should be fixed before rendering. 警告s are surfaced for 代理 review; 添加 --strict to fAIl on 警告s too. Repeated static issues are collapsed by default so JSON 输出 stays compact for LLM 上下文 windows. If overflow is intentional for an entrance/exit animation, mark the element or ancestor with data-layout-allow-overflow. If a decorative element should never be 审计ed, mark it with data-layout-ignore.

npx hyperframes layout remAIns avAIlable as a compatibility alias for the same visual inspection pass.

Previewing npx hyperframes preview # serve current directory npx hyperframes preview --port 4567 # custom port (default 3002)

Hot-reloads on file changes. Opens the studio in your browser automatically.

When handing a project back to the user, use the Studio project URL, not the source 索引.html path:

http://localhost:/#project/

Use the actual port from the preview 输出 and the project directory name. For example, after npx hyperframes preview --port 3017 in codex-openAI-video, 报告 http://localhost:3017/#project/codex-openAI-video.

Treat 索引.html as source-code 上下文 only. It is fine to link it as an implementation file, but do not label it as the project or preview surface.

Rendering npx hyperframes render # standard MP4 npx hyperframes render --输出 final.mp4 # named 输出 npx hyperframes render --质量 draft # fast iteration npx hyperframes render --fps 60 --质量 high # final delivery npx hyperframes render --格式化 网页m # transparent 网页M npx hyperframes render --docker # byte-identical

Flag Options Default Notes --输出 path renders/name_timestamp.mp4 输出 path --fps 24, 30, 60 30 60fps doubles render time --质量 draft, standard, high standard draft for iterating --格式化 mp4, 网页m mp4 网页M supports transparency --workers 1-8 or auto auto Each spawns Chrome --docker flag off Reproducible 输出 --gpu flag off GPU-accelerated encoding --strict flag off FAIl on lint errors --strict-all flag off FAIl on errors AND 警告s --variables JSON object — Override variable values declared in data-composition-variables --variables-file path — JSON file with variable values (alternative to --variables) --strict-variables flag off FAIl render on und