---
id: daily-hyperframes-cli
name: "hyperframes-cli"
url: https://skills.yangsir.net/skill/daily-hyperframes-cli
author: heygen-com
domain: multimedia
tags: ["video-editing", "cli", "automation", "workflow", "ffmpeg"]
install_count: 58400
rating: 4.70 (9 reviews)
github: https://github.com/heygen-com/hyperframes
---

# hyperframes-cli

> HyperFrames 框架的 CLI 工具，提供脚手架、预览、构建和导出完整工作流

**Stats**: 58,400 installs · 4.7/5 (9 reviews)

## Before / After 对比

### 项目搭建流程

**Before**:

手动创建项目目录、配置文件、依赖管理、构建脚本，容易遗漏配置项且耗时

**After**:

一条命令初始化完整项目结构，包含最佳实践配置和开发工具，30 秒开始创作

| Metric | Before | After | Change |
|---|---|---|---|
| 搭建时间 | 20分钟 | 0.5分钟 | -97.5% |

## Readme

# hyperframes-cli

# HyperFrames CLI

Everything runs through `npx hyperframes`. Requires Node.js >= 22 and FFmpeg.

## Workflow

- **Scaffold** — `npx hyperframes init my-video`

- **Write** — author HTML composition (see the `hyperframes` skill)

- **Lint** — `npx hyperframes lint`

- **Preview** — `npx hyperframes preview`

- **Render** — `npx hyperframes render`

Lint before preview — catches missing `data-composition-id`, overlapping tracks, unregistered timelines.

## 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 clip.mp4        # with video file
npx hyperframes init my-video --audio track.mp3       # with audio file
npx hyperframes init my-video --non-interactive       # skip prompts (CI/agents)

```

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

`init` creates the right file structure, copies media, transcribes audio with Whisper, and installs AI coding skills. Use it instead of creating files by hand.

## Linting

```
npx hyperframes lint                  # current directory
npx hyperframes lint ./my-project     # specific project
npx hyperframes lint --verbose        # info-level findings
npx hyperframes lint --json           # machine-readable

```

Lints `index.html` and all files in `compositions/`. Reports errors (must fix), warnings (should fix), and info (with `--verbose`).

## 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.

## Rendering

```
npx hyperframes render                                # standard MP4
npx hyperframes render --output final.mp4             # named output
npx hyperframes render --quality draft                # fast iteration
npx hyperframes render --fps 60 --quality high        # final delivery
npx hyperframes render --format webm                  # transparent WebM
npx hyperframes render --docker                       # byte-identical

```

Flag
Options
Default
Notes

`--output`
path
renders/name_timestamp.mp4
Output path

`--fps`
24, 30, 60
30
60fps doubles render time

`--quality`
draft, standard, high
standard
draft for iterating

`--format`
mp4, webm
mp4
WebM supports transparency

`--workers`
1-8 or auto
auto
Each spawns Chrome

`--docker`
flag
off
Reproducible output

`--gpu`
flag
off
GPU-accelerated encoding

`--strict`
flag
off
Fail on lint errors

`--strict-all`
flag
off
Fail on errors AND warnings

**Quality guidance:** `draft` while iterating, `standard` for review, `high` for final delivery.

## Transcription

```
npx hyperframes transcribe audio.mp3
npx hyperframes transcribe video.mp4 --model medium.en --language en
npx hyperframes transcribe subtitles.srt   # import existing
npx hyperframes transcribe subtitles.vtt
npx hyperframes transcribe openai-response.json

```

## Text-to-Speech

```
npx hyperframes tts "Text here" --voice af_nova --output narration.wav
npx hyperframes tts script.txt --voice bf_emma
npx hyperframes tts --list  # show all voices

```

## Troubleshooting

```
npx hyperframes doctor       # check environment (Chrome, FFmpeg, Node, memory)
npx hyperframes browser      # manage bundled Chrome
npx hyperframes info         # version and environment details
npx hyperframes upgrade      # check for updates

```

Run `doctor` first if rendering fails. Common issues: missing FFmpeg, missing Chrome, low memory.

## Other

```
npx hyperframes compositions   # list compositions in project
npx hyperframes docs           # open documentation
npx hyperframes benchmark .    # benchmark render performance

```
Weekly Installs2.6KRepository[heygen-com/hyperframes](https://github.com/heygen-com/hyperframes)GitHub Stars1.3KFirst SeenMar 31, 2026Security Audits[Gen Agent Trust HubPass](/heygen-com/hyperframes/hyperframes-cli/security/agent-trust-hub)[SocketPass](/heygen-com/hyperframes/hyperframes-cli/security/socket)[SnykWarn](/heygen-com/hyperframes/hyperframes-cli/security/snyk)Installed oncodex2.6Kgemini-cli2.6Kcursor2.5Kopencode2.5Kgithub-copilot2.5Kamp2.5K

---
*Source: https://skills.yangsir.net/skill/daily-hyperframes-cli*
*Markdown mirror: https://skills.yangsir.net/api/skill/daily-hyperframes-cli/markdown*