HyperFrames CLI

O que HyperFrames CLI faz?

Tudo roda através de npx hyperframes. Requer Node.js >= 22 e FFmpeg.

Fluxo de Trabalho

1. Scaffold — npx hyperframes init meu-video
2. Escrever — autor da composição HTML (veja a skill hyperframes)
3. Lint — npx hyperframes lint
4. Pré-visualizar — npx hyperframes preview
5. Renderizar — npx hyperframes render

Execute o lint antes da pré-visualização — detecta data-composition-id ausente, faixas sobrepostas, timelines não registradas.

Scaffolding

npx hyperframes init meu-video                        # assistente interativo
npx hyperframes init meu-video --example warm-grain   # escolher um exemplo
npx hyperframes init meu-video --video clip.mp4        # com arquivo de vídeo
npx hyperframes init meu-video --audio track.mp3       # com arquivo de áudio
npx hyperframes init meu-video --non-interactive       # pular prompts (CI/agentes)

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

init cria a estrutura correta de arquivos, copia mídia, transcreve áudio com Whisper e instala skills de codificação de IA. Use em vez de criar arquivos manualmente.

Linting

npx hyperframes lint                  # diretório atual
npx hyperframes lint ./meu-projeto     # projeto específico
npx hyperframes lint --verbose        # achados em nível de informação
npx hyperframes lint --json           # legível por máquina

Analisa index.html e todos os arquivos em compositions/. Reporta erros (devem ser corrigidos), avisos (devem ser corrigidos) e informações (com --verbose).

Pré-visualização

npx hyperframes preview                   # servir diretório atual
npx hyperframes preview --port 4567       # porta personalizada (padrão 3002)

Recarrega automaticamente com alterações nos arquivos. Abre o estúdio no navegador automaticamente.

Renderização

npx hyperframes render                                # MP4 padrão
npx hyperframes render --output final.mp4             # saída nomeada
npx hyperframes render --quality draft                # iteração rápida
npx hyperframes render --fps 60 --quality high        # entrega final
npx hyperframes render --format webm                  # WebM transparente
npx hyperframes render --docker                       # idêntico byte a byte

Flag	Opções	Padrão	Notas
--output	caminho	renders/nome_timestamp.mp4	Caminho de saída
--fps	24, 30, 60	30	60fps dobra o tempo de render
--quality	draft, standard, high	standard	draft para iterar
--format	mp4, webm	mp4	WebM suporta transparência
--workers	1-8 ou auto	auto	Cada um inicia Chrome
--docker	flag	off	Saída reproduzível
--gpu	flag	off	Codificação acelerada por GPU
--strict	flag	off	Falha em erros de lint
--strict-all	flag	off	Falha em erros E avisos

Orientação de qualidade: draft durante iteração, standard para revisão, high para entrega final.

Transcrição

npx hyperframes transcribe audio.mp3
npx hyperframes transcribe video.mp4 --model medium.en --language pt
npx hyperframes transcribe subtitles.srt   # importar existente
npx hyperframes transcribe subtitles.vtt
npx hyperframes transcribe openai-response.json

Texto-para-Fala (TTS)

npx hyperframes tts "Texto aqui" --voice af_nova --output narracao.wav
npx hyperframes tts script.txt --voice bf_emma
npx hyperframes tts --list  # mostrar todas as vozes

Solução de Problemas

npx hyperframes doctor       # verificar ambiente (Chrome, FFmpeg, Node, memória)
npx hyperframes browser      # gerenciar Chrome agrupado
npx hyperframes info         # versão e detalhes do ambiente
npx hyperframes upgrade      # verificar atualizações

Execute doctor primeiro se a renderização falhar. Problemas comuns: FFmpeg ausente, Chrome ausente, pouca memória.

Outros

npx hyperframes compositions   # listar composições no projeto
npx hyperframes docs           # abrir documentação
npx hyperframes benchmark .    # benchmark de desempenho de renderização