hyperframes-cli

Original：🇺🇸 English
Translated

HyperFrames CLI tool — hyperframes init, lint, preview, render, transcribe, tts, doctor, browser, info, upgrade, compositions, docs, benchmark. Use when scaffolding a project, linting or validating compositions, previewing in the studio, rendering to video, transcribing audio, generating TTS, or troubleshooting the HyperFrames environment.

3installs
Sourcenateherkai/hyperframes-student-kit
Added on

NPX Install

npx skill4agent add nateherkai/hyperframes-student-kit hyperframes-cli

Tags

Translated version includes tags in frontmatter
hyperframes-clivideo-renderingproject-scaffoldingaudio-transcriptiontts-generation

SKILL.md Content

View Translation Comparison →

HyperFrames CLI

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

Workflow

  1. Scaffold — 
    npx hyperframes init my-video
  2. Write — author HTML composition (see the 
    hyperframes
    skill)
  3. Lint — 
    npx hyperframes lint
  4. Preview — 
    npx hyperframes preview
  5. Render — 
    npx hyperframes render
Lint before preview — catches missing 
data-composition-id
, overlapping tracks, unregistered timelines.

Scaffolding

bash
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

bash
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

bash
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

bash
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
FlagOptionsDefaultNotes
--output
pathrenders/name_timestamp.mp4Output path
--fps
24, 30, 603060fps doubles render time
--quality
draft, standard, highstandarddraft for iterating
--format
mp4, webmmp4WebM supports transparency
--workers
1-8 or autoautoEach spawns Chrome
--docker
flagoffReproducible output
--gpu
flagoffGPU-accelerated encoding
--strict
flagoffFail on lint errors
--strict-all
flagoffFail on errors AND warnings
Quality guidance: 
draft
while iterating, 
standard
for review, 
high
for final delivery.

Transcription

bash
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

bash
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

bash
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

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