用途:HyperFrames CLI 是围绕 HTML 视频合成的命令行开发循环工具,所有操作通过 npx hyperframes 执行,需 Node.js >= 22 与 FFmpeg。
主要能力:init 生成项目结构、复制媒体、用 Whisper 转写音频并安装 AI 编码技能;lint 检查 index.html 与 compositions/ 下文件,报告缺失 data-composition-id、轨道重叠、未注册时间线等问题;inspect 在无头 Chrome 中渲染并沿时间线扫描,报告文字溢出气泡/容器或画布、子元素逃逸裁剪容器等布局问题;preview 启动带热重载的本地服务(默认端口 3002);render 输出 MP4 或 WebM,支持 fps、quality、workers、docker、gpu、strict 等参数;另有 tts、transcribe、remove-background 生成素材,doctor、browser、info、upgrade 用于排障。
使用方式:典型流程为 init → 编写 HTML 合成 → lint → inspect → preview → render,建议先 lint 和 inspect 再预览。示例:npx hyperframes init my-video;npx hyperframes lint --json;npx hyperframes inspect --samples 15;npx hyperframes preview --port 4567;npx hyperframes render --quality high。init 支持 --example、--video、--audio、--tailwind、--non-interactive,模板含 blank、warm-grain、play-mode、swiss-grid、vignelli、decision-tree、kinetic-type、product-promo、nyt-graph。渲染可用 --variables 覆盖 data-composition-variables 声明的变量。
适用场景:制作基于 HTML 的动效视频、产品宣传、数据图表动画等,并适合在 CI 或智能体流程中非交互式运行。
限制:需 Node.js >= 22 和 FFmpeg;渲染失败时先运行 doctor 排查 FFmpeg、Chrome 或内存问题;使用 --tailwind 时脚手架采用 Tailwind v4.2 浏览器运行时,与 Studio 的 v3 不同;溢出若为有意动画需标记 data-layout-allow-overflow,装饰元素可标记 data-layout-ignore。