HyperFrames CLI
모든 명령은 npx hyperframes로 실행됩니다. Node.js >= 22와 FFmpeg가 필요합니다.
워크플로우
- 스캐폴딩 —
npx hyperframes init my-video - 작성 — HTML 컴포지션 작성 (
hyperframes스킬 참조) - 린트 —
npx hyperframes lint - 미리보기 —
npx hyperframes preview - 렌더링 —
npx hyperframes render
린트는 미리보기 전에 실행하세요 — 누락된 data-composition-id, 중복 트랙, 미등록 타임라인 등을 잡아냅니다.
스캐폴딩
npx hyperframes init my-video # 대화형 마법사
npx hyperframes init my-video --example warm-grain # 예제 선택
npx hyperframes init my-video --video clip.mp4 # 비디오 파일 포함
npx hyperframes init my-video --audio track.mp3 # 오디오 파일 포함
npx hyperframes init my-video --non-interactive # 프롬프트 생략 (CI/에이전트)
템플릿: blank, warm-grain, play-mode, swiss-grid, vignelli, decision-tree, kinetic-type, product-promo, nyt-graph.
init은 올바른 파일 구조를 생성하고, 미디어를 복사하며, Whisper로 오디오를 전사하고, AI 코딩 스킬을 설치합니다. 수동으로 파일을 생성하는 대신 사용하세요.
린팅
npx hyperframes lint # 현재 디렉토리
npx hyperframes lint ./my-project # 특정 프로젝트
npx hyperframes lint --verbose # 정보 수준 결과
npx hyperframes lint --json # 기계 판독 가능
index.html 및 compositions/ 디렉토리의 모든 파일을 검사합니다. 오류(수정 필수), 경고(수정 권장), 정보(--verbose 필요)를 보고합니다.
미리보기
npx hyperframes preview # 현재 디렉토리 서빙
npx hyperframes preview --port 4567 # 사용자 지정 포트 (기본 3002)
파일 변경 시 자동 리로드됩니다. 브라우저에서 스튜디오를 자동으로 엽니다.
렌더링
npx hyperframes render # 표준 MP4
npx hyperframes render --output final.mp4 # 출력 파일명 지정
npx hyperframes render --quality draft # 빠른 반복 작업
npx hyperframes render --fps 60 --quality high # 최종 출력
npx hyperframes render --format webm # 투명 WebM
npx hyperframes render --docker # 바이트 동일 출력
| 플래그 | 옵션 | 기본값 | 참고 |
|---|---|---|---|
--output | 경로 | renders/name_timestamp.mp4 | 출력 경로 |
--fps | 24, 30, 60 | 30 | 60fps는 렌더링 시간 2배 |
--quality | draft, standard, high | standard | draft는 반복 작업용 |
--format | mp4, webm | mp4 | WebM은 투명도 지원 |
--workers | 1-8 또는 auto | auto | 각 worker가 Chrome 인스턴스 |
--docker | 플래그 | off | 재현 가능한 출력 |
--gpu | 플래그 | off | GPU 가속 인코딩 |
--strict | 플래그 | off | 린트 오류 시 실패 |
--strict-all | 플래그 | off | 오류 및 경고 시 실패 |
품질 가이드: 반복 작업 중에는 draft, 검토 시 standard, 최종 출력 시 high.
전사
npx hyperframes transcribe audio.mp3
npx hyperframes transcribe video.mp4 --model medium.en --language en
npx hyperframes transcribe subtitles.srt # 기존 자막 가져오기
npx hyperframes transcribe subtitles.vtt
npx hyperframes transcribe openai-response.json
텍스트 음성 변환
npx hyperframes tts "텍스트 입력" --voice af_nova --output narration.wav
npx hyperframes tts script.txt --voice bf_emma
npx hyperframes tts --list # 모든 음성 목록 표시
문제 해결
npx hyperframes doctor # 환경 확인 (Chrome, FFmpeg, Node, 메모리)
npx hyperframes browser # 번들 Chrome 관리
npx hyperframes info # 버전 및 환경 세부 정보
npx hyperframes upgrade # 업데이트 확인
렌더링 실패 시 먼저 doctor를 실행하세요. 일반적인 문제: FFmpeg 누락, Chrome 누락, 메모리 부족.
기타
npx hyperframes compositions # 프로젝트 내 컴포지션 목록
npx hyperframes docs # 문서 열기
npx hyperframes benchmark . # 렌더링 성능 벤치마크