Communitygithub.com

hyperframes-cli

로컬 또는 클라우드에서 하이퍼프레임스 CLI를 사용하여 모션 그래픽 비디오를 구성, 미리보기, 렌더링합니다.

hyperframes-cli란 무엇인가요?

HyperFrames CLI는 개발자가 코드 기반 모션 그래픽 워크플로우를 구축, 반복 및 렌더링할 수 있는 명령줄 도구입니다. Node.js 22 이상과 FFmpeg가 필요하며, npx를 통해 바로 실행할 수 있습니다. 이 도구는 프로젝트 스캐폴딩, 카탈로그 검색을 통한 모션 프리미티브 재사용, 빠른 lint 및 체크 피드백 루프, 다양한 품질 설정(드래프트/하이)과 로컬 또는 클라우드(AWS Lambda, GCP Cloud Run, HeyGen) 렌더링 옵션을 지원합니다. 특히 오프라인 시맨틱 검색 계층('--on-device')과 로컬 텍스트 매칭 계층을 제공하며, 검색 쿼리는 외부로 전송되지 않아 프라이버시가 보장됩니다. CLI는 Studio와의 컨텍스트 인식 상호작용, 하위 구성 요소의 스냅샷 테스트, WCAG 대비 검사 등을 포함한 엄격한 최종 게이트('hyperframes check')를 지원합니다. 사용자 피드백 시스템을 통해 발견된 문제를 보고하고, 재현 패킷(구조 분석 포함)을 첨부하여 개발팀이 패턴을 분석할 수 있도록 돕습니다.

지원 대상~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/jasonfast123/hyperframes-skills/tree/main/skills/hyperframes-cli

즐겨 사용하는 AI에게 물어보기

이 에이전트 스킬이 미리 로드된 새 채팅을 엽니다.

문서

HyperFrames CLI

프로젝트 지침에서 래퍼를 제공하지 않는 한 npx hyperframes ...로 명령을 실행하세요. 래퍼가 있는 경우 이를 따르세요. CLI는 Node.js 22 이상과 FFmpeg가 필요합니다.

개발 루프

  1. 스캐폴드: npx hyperframes init <project> 또는 사이트를 캡처합니다. TTY가 아닌 모드에서는 --non-interactive --example=<name>을 전달하세요.
  2. 움직임 찾기: 직접 모션을 작성하기 전에, 이미 해당 동작을 수행하는 프리미티브가 있는지 검색하세요: npx hyperframes catalog --query "한 줄씩 헤드라인을 드러내기". 염두에 둔 메커니즘이 아닌 원하는 효과를 물어보세요. npx hyperframes add <name>으로 설치합니다(/hyperframes-registry 참조). 맞는 것이 없을 때만 직접 작성하세요.
  3. 작성: /hyperframes-core를 사용하여 컴포지션을 작성합니다.
  4. 편집 중 빠른 피드백 받기: 첫 번째 HTML 패스 후와 구조적 변경 후에 npx hyperframes lint를 실행합니다.
  5. 최종 게이트 실행: npx hyperframes check를 실행합니다. lint를 먼저 다시 실행한 후 브라우저를 엽니다. 불필요한 독립 lint 호출을 앞에 추가하지 마세요. 주석이 달린 개요 프레임과 크롭 찾기를 위해 --snapshots를 추가하세요.
  6. 하위 컴포지션 검사: index.html이 data-composition-src를 마운트할 때, 중간 지점 스냅샷을 캡처하고 각 마운트된 장면을 검사합니다.
  7. 최종 Studio 미리보기 열기: npx hyperframes preview --background를 실행하고, URL이 HTTP 200을 반환하는지 확인한 후, 타임라인 프로젝트 URL을 사용자에게 전달하고 수정 또는 렌더링할지 물어보세요. 검토가 끝날 때까지 유지하세요.
  8. 승인 후에만 렌더링: 반복에는 드래프트 품질을, 최종 전달에는 고품질을 사용하세요.
  9. 출력 확인: 파일이 존재하고, 비어 있지 않으며, 적절한 길이인지 확인하세요.

필수 제작자-편집 상호 참조

  • 줌, 펀치 인/아웃, 리프레임, 카메라 무브, 또는 키프레임 모션을 작성하거나 진단하기 전에 /hyperframes-keyframes를 먼저 읽으세요.
  • hyperframes keyframes 전에 /hyperframes-keyframes를 읽으세요. 이 명령은 애니메이션 궤적을 표시하며 클립 컷을 진단하지 않습니다.
  • 컷, 트림, 스플라이스, 재정렬 또는 소스 타이밍 편집의 경우 /hyperframes-core를 읽고 해당 클립/타임라인 계약을 사용하세요.
  • 페이드 인/아웃, 크로스페이드, 트랙 게인, 볼륨 오토메이션, 덕킹, 보이스오버 카브 또는 배치된 오디오에 대한 FX의 경우 /hyperframes-audio를 읽으세요. 클립 배치 또는 픽처 타이밍도 변경되는 경우 코어를 함께 로드하세요.
  • 미디어를 소싱/생성하거나 파생 에셋을 사전 처리하는 데만 /media-use를 사용하세요. /hyperframes-core → references/creator-editing-recipes.md에서 제작자 편집 마크업을 복사하세요.
# 빠른 반복 확인; 작성하는 동안 필요에 따라 반복하세요.
npx hyperframes lint

# 필수 최종 게이트; lint를 포함합니다.
npx hyperframes check
npx hyperframes preview --background
npx hyperframes render --quality high --output out.mp4
test -s out.mp4
ffprobe -v error -show_format out.mp4

check는 lint를 먼저 실행한 다음, 하나의 브라우저 세션과 하나의 시크 패스를 사용하여 런타임 오류, 실패한 요청, 레이아웃, *.motion.json 어설션 및 WCAG 대비를 감사합니다. 지속적인 발견 사항은 종료 코드를 차단합니다. 일시적인 진입 또는 종료 발견 사항은 정보 제공용입니다. 경고를 차단하려면 --strict를 사용하세요. validate, inspect 및 layout은 호환성을 위해 별칭으로 남아 있지만 새 명령이나 스크립트에 나타나서는 안 됩니다.

두 가지 다른 미리보기 화면

이러한 상태를 혼동하지 마세요:

화면열릴 수 있는 시점목적
스토리보드 보드컴포지션 확인 전, storyboard: yes일 때만계획 카드와 와이어프레임 스케치 검토. ?view=storyboard#project/<name>을 엽니다.
최종 컴포지션 미리보기check 통과 후렌더링 전 조립된 타임라인 검토. #project/<name>을 엽니다.

초기 보드는 최종 비디오의 승인이 아닙니다. 렌더링은 항상 hyperframes-core/references/review-loop.md에 정의된 최종 승인이 필요합니다.

하위 컴포지션 스모크 테스트

정적 감사는 모든 마운트 실패를 잡을 수 없습니다. 프로젝트가 하위 컴포지션을 사용하는 경우 각 호스트 슬롯에 대해 최소한 하나의 보이는 중간 지점을 캡처하세요:

npx hyperframes snapshot --at <t1>,<t2>,<t3>

아주 작은 스타일 없는 콘텐츠, 캔버스 크기 아이콘, 누락된 히어로 요소 또는 타임라인 등록 시간 초과는 렌더링을 차단하는 마운트 결함으로 처리하세요. 해당 수정 사항은 hyperframes-core/references/sub-compositions.md를 참조하세요.

에이전트 규칙

  • 모션을 직접 작성하기 전에 카탈로그를 검색하세요. npx hyperframes catalog --query "<평범한 영어로 비트>". 검색은 완전히 로컬에서 이루어집니다: 호스팅 티어도, 계정도 없으며 쿼리 텍스트는 절대 전송되지 않습니다. 기본적으로 항목의 이름, 제목 및 설명과 공유되는 어휘를 기준으로 순위를 매기며, 이는 카탈로그 자체의 표현을 재사용하지 않는 모든 표현을 놓칩니다. --on-device를 추가하여 의미별로 순위를 매기세요(아래 오프라인 티어 참조).

  • 비디오 언어와 상관없이 영어로 쿼리하세요. 두 티어 모두 영어 카탈로그를 인덱싱하므로, 다른 스크립트의 쿼리는 검색 가능한 용어를 생성하지 않으며 결과를 반환하지 않습니다. 움직임을 영어로 설명하세요. 화면상의 텍스트는 비디오에 필요한 언어로 유지됩니다. No searchable words in query는 정확히 이것을 의미하며 누락된 구성 요소가 아니므로 카탈로그 갭으로 보고하지 마세요.

  • 어떤 티어가 응답했는지 읽고, 결과가 나타난다고 추론하지 마세요. --json을 사용하면 봉투에 query, tier(on-device 또는 words), tier_detail, dropped, unindexed, shown, total 및 results가 포함되며, 응답 티어가 생성하는 top_score와 티어가 요청되었지만 실행할 수 없을 때의 warnings도 포함됩니다. words의 약한 결과는 예상됩니다. 동일한 결과가 on-device에서 나오면 버그입니다. top_score는 온디바이스 전용이며 임계값이 없습니다: 랭커는 모든 쿼리에 대해 카탈로그 전체를 어떤 순서로 반환하므로, 합격/불합격이 아닌 증거로 읽으세요.

  • dropped와 unindexed는 레지스트리와 온디바이스 인덱스 간의 반대 편향이며, 쿼리 문구를 바꾸는 것으로는 해결되지 않습니다. dropped는 이 레지스트리가 설치할 수 없는 순위가 매겨진 이름을 계산하므로, 가장 강력한 일치 항목이 손실되는 것입니다. unindexed는 인덱스가 전혀 볼 수 없는 레지스트리 동작을 계산하므로, 어떤 쿼리도 반환할 수 없습니다. 레지스트리 새로 고침은 이에 대한 해결책이 아닙니다: 매니페스트는 24시간 TTL을 가지며 자체 복구되는 반면, 벡터는 ~/.hyperframes/catalog/에 개별적으로 게시된 아티팩트입니다. unindexed가 0보다 클 때 --on-device를 다시 실행하면 해당 인덱스를 다시 가져오므로, 이것이 사용자에게 제공할 치료법입니다. 순수한 오버커버리지 편향(dropped가 0보다 크고 unindexed가 0)은 다시 가져오기를 트리거하지 않습니다. ~/.hyperframes/catalog/를 지우는 것이 유일한 방법입니다. 두 카운트 모두 결과가 아닌 이름이므로 total을 초과할 수 있습니다.

  • 검색 결과에 설치할 가치가 있는 것이 없으면 그렇게 말하세요. npx hyperframes feedback --search-miss "<실행한 쿼리>" --wanted "<필요한 움직임>" --tier <응답한 티어>. 이 줄을 조립할 필요는 없습니다: catalog --query는 미리 채워진 상태로 인쇄하며, 모든 --json 검색 봉투는 report_gap을 쿼리와 티어가 이미 올바른 상태로 전달합니다. --wanted를 채우고 보내기만 하면 됩니다. 이것이 쿼리를 어디로든 보내는 유일한 경로이며, 일반 catalog --query가 아무것도 보내지 않겠다는 약속을 지키도록 별도의 의도적인 명령입니다. 어느 티어에서든 보고하세요. 결과가 동작을 수행하지 못할 때마다 보고합니다. 온디바이스 티어를 기다리지 마세요. 온디바이스 티어는 동의가 필요한 33MB 다운로드가 필요하므로 대부분의 에이전트 실행에서 꺼져 있습니다. 기다리면 결코 보고하지 않게 됩니다. 티어는 보고서에 함께 포함되므로, 어휘 누락과 의미 누락이 구별 가능한 상태로 유지됩니다. 반환되는 것은 카탈로그에 아직 없는 동작 목록이며, 설치 횟수에서 추측하는 것이 아니라 직접 읽은 것입니다. 따라서 중요한 표현은 당신이 상상한 항목 이름이 아니라 원했던 효과입니다. 등급을 포함하지 않으며 등급 메트릭에 포함되지 않습니다.

  • 오프라인 티어를 제공하되 절대 자동으로 활성화하지 마세요. 일회성 ~33MB 다운로드(bge-small-en-v1.5의 양자화된 ONNX 빌드와 해당 토크나이저, 고정 리비전에 고정됨)와 레지스트리의 카탈로그 벡터로, 둘 다 ~/.hyperframes/ 아래에 캐시되며 프로젝트나 패키지에 추가되지 않습니다. 캐시되면 아무것도 전송하지 않고 의미별로 순위를 매깁니다. 크기를 말하고 사람이 결정하도록 한 다음, 동의하면 --on-device(-y로 프롬프트 건너뛰기)를 전달하세요. 대화형 제안은 TTY에서만 발생하며, --json에서는 이에 대해 아무것도 인쇄되지 않으므로 에이전트 실행에서는 직접 사용자에게 제기해야 합니다.

  • 에이전트 및 CI 호출에는 --json을 선호하세요. 서버 모드 render, preview, play는 일반 JSON 출력을 제공하지 않습니다. preview --selection --json 및 preview --context --json은 쿼리 모드 예외입니다.

  • doctor --json은 항상 0으로 종료됩니다. 해당 페이로드에서 게이트하세요:

    npx hyperframes doctor --json | jq -e '.ok' >/dev/null
    
  • TTY가 아닌 모드는 자동입니다. init은 거기에 --example이 필요합니다. TTY에서 결정적 동작을 강제하려면 --non-interactive를 사용하세요.

  • 동일한 확인 루프의 모든 명령에 대해 하나의 HYPERFRAMES_RUN_ID를 사용하세요.

  • 해당 경고, 변수 또는 CI 조건이 렌더링을 차단해야 할 때 --strict, --strict-all 및 --strict-variables를 사용하세요.

  • JSON 경로는 홈 디렉토리를 $HOME으로 수정합니다. 수정을 되돌리려고 하지 마세요.

  • 호스팅된 클라우드 프로젝트가 200MB 업로드 제한에 가까워지거나 초과하면 cloud render --dry-run --json을 사용하고 references/cloud.md의 .hyperframesignore 조사를 따르세요. 단지 크다고 해서 에셋을 무시하지 마세요.

  • 검사가 통과했다고 해서 렌더링하지 마세요. 최종 미리보기에서 멈추고 승인을 기다리세요.

Studio 지시 편집

사용자가 "이 요소" 또는 현재 선택 항목을 참조할 때는 추측하는 대신 Studio에 쿼리하세요:

npx hyperframes preview --context --json --context-fields selection

가능하면 selection.target.hfId를, 그렇지 않으면 해당 선택자와 소스 파일을 사용하세요. 결과가 no-selection을 보고하면 사용자에게 요소를 클릭하고 다시 실행하도록 요청하세요. 필요한 컨텍스트 조각만 요청하세요. 계산된 스타일이나 편집 가능한 텍스트 메타데이터에만 --context-detail full을 사용하세요. 전체 동작 및 실패 코드는 references/preview-render.md에 있습니다.

렌더링 선택

필요 사항명령어
빠른 로컬 반복npx hyperframes render --quality draft
최종 로컬 전달npx hyperframes render --quality high --output out.mp4
재현 가능한 컨테이너 렌더링npx hyperframes render --docker --strict --output out.mp4
로컬 변수 기반 배치 렌더링npx hyperframes render --batch rows.json --output "renders/{name}.mp4"
HeyGen 호스팅 제로-인프라 렌더링npx hyperframes cloud render
자체 관리 분산 AWS 렌더링npx hyperframes lambda render <project> --width 1920 --height 1080 --wait
자체 관리 분산 GCP 렌더링npx hyperframes cloudrun render <project> --width 1920 --height 1080 --wait

스킬 속성은 자동입니다. 위 예제에는 --skill이 필요하지 않습니다. 워크플로우(hyperframes init --skill=<workflow>)로 스캐폴딩된 프로젝트는 hyperframes.json에 소유 스킬을 기록하며, 이후의 모든 렌더링(재렌더링, npm run render, --batch)은 익명 텔레메트리에서 이를 상속합니다. 워크플로우를 통해 생성되지 않은 프로젝트에만 명시적으로 --skill=<slug>를 전달하세요(첫 번째 렌더링이 이를 유지합니다).

사용자가 로컬 Chrome, FFmpeg 또는 AWS 없이 호스팅 렌더링을 원할 때 클라우드 렌더링을 사용하세요. AWS 소유권이 요구 사항인 경우에만 Lambda를 사용하세요. GCP 소유권이 요구 사항인 경우에만 Cloud Run을 사용하세요. 클라우드 경로를 실행하기 전에 일치하는 참조를 읽으세요.

성공적인 렌더링을 확인한 후 텔레메트리가 비활성화되어 있거나 사용자가 거부하지 않는 한 하나의 피드백 보고서를 보내세요:

npx hyperframes feedback --rating <0-10> --comment "<구체적인 결과 또는 마찰>"

정상 실행 피드백은 간결하게 유지하세요. 버그나 마찰에 대해서는 증상 요약만 보내지 말고 재현 패킷을 캡처한 후 제출하세요. 재현 가능한 명령(프로젝트 디렉토리 기준 — 피드백은 공개 채널에 제출되므로 절대 경로, 홈 디렉토리 접두사 또는 사용자/머신 식별자를 붙여넣지 마세요), 예상 동작과 실제 동작, 정확한 오류(스택 추적에서도 절대 경로를 제거하고 기본 이름 + 줄만 유지하고 선행 디렉토리는 제거), 출력 완료/대체/실패 여부, 해결 방법 및 재현 프로젝트 상태를 포함하세요. 시각적 결함(검은 프레임, 깜박임, 손상된 출력, 잘못된 프레임, 빈 출력, 기타 시각적 이상)을 설명하는 등급 ≤ 7의 경우 COMPOSITION_STRUCTURE: 블록도 포함하세요. 이는 프라이버시를 보호하는 구조적 분석(요소 인구 조사 + 속성 존재 + 타임라인 모양)으로, 유지 관리자가 컴포지션 ZIP 없이 알려진 버그 패턴과 일치시킬 수 있습니다. 에이전트는 컴포지션 인구 조사 헬퍼를 통해 이를 자동으로 채웁니다. 사람 사용자가 수동으로 채우지 않습니다. 문제가 다시 재현되지 않은 경우 그렇게 말하고 마지막 실패한 명령과 로그를 계속 포함하세요. --file-issue는 동의가 있을 때만 사용하세요. 공개 URL에 최소 재현을 게시합니다. 필수 패킷 형식 및 프라이버시 경고는 references/preview-render.md에 있습니다.

명령을 실행하기 전에 일치하는 참조를 읽으세요

다음 참조...

Individual skills in this repo

This repo contains 19 individual skills — each has its own dedicated page.

embedded-captions

>

faceless-explainer

Turn arbitrary text — an article, notes, a topic, a brief — into a faceless explainer video: there is no site or footage to capture, so the visuals are invented per scene (typography, abstract graphics, diagrams, data-viz). Use for topic explainers, concept breakdowns, how-tos, listicles. Not a video built from a website (/product-launch-video — promo or tour). Unclear → /hyperframes.

figma

Import Figma content into a HyperFrames composition — rendered assets, brand tokens, components, storyboard sections → reconstructed motion (frames read as states, not slides) (REST/CLI), connector-assisted motion when available, and shaders from a connector or native export. Use when the user pastes a figma.com link or asks to bring a Figma design, frame, logo, brand, or animation into a video/composition.

general-video

>

hyperframes

>

hyperframes-animation

All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition

hyperframes-audio

>

hyperframes-core

The HyperFrames composition contract — build one renderable project. Use for composition structure, the `data-*` timing attributes, `class=

hyperframes-creative

Non-animation creative direction for HyperFrames videos. Use for design spec (frame.md / design.md) handling, palettes, typography, narration, beat planning, audio-reactive visuals, composition patterns, and brand / style decisions. For atomic motion patterns and scene blueprints, use `hyperframes-animation`.

hyperframes-keyframes

>

hyperframes-registry

Install, discover, and wire registry blocks and components into HyperFrames compositions. Use when running hyperframes add or hyperframes catalog, installing one item or every block matching a tag, wiring an installed item into index.html, or working with hyperframes.json. Covers discovery, install locations, block sub-composition wiring, component snippet merging, and authoring a new block or component to contribute upstream (idea → scaffold → validate → PR).

jasonfast123/hyperframes-skills

Import Figma content into a HyperFrames composition — rendered assets, brand tokens, components, storyboard sections → reconstructed motion (frames read as states, not slides) (REST/CLI), connector-assisted motion when available, and shaders from a connector or native export. Use when the user pastes a figma.com link or asks to bring a Figma design, frame, logo, brand, or animation into a video/composition.

media-use

Agent Media OS, the single skill for every media need in a HyperFrames project. Resolve BGM, SFX, image, icon, brand logo, voice, color grade, or LUT into a frozen local file or paste-ready block + ledger record (one verb, `resolve`); generate via TTS / music / image models when the catalog misses; produce voiceover, transcription, captions, and background removal through one shared audio engine; operate on media (cut / reframe / transform); and reuse assets across projects. Also use for vague feedback that real footage looks dark, flat, boring, should feel retro/camcorder/print/ASCII, needs privacy, or needs a media reveal.

motion-graphics

>

music-to-video

Turn a music track (an audio file, a video to pull audio from, or a track generated from a mood brief) into a beat-synced video — lyric video, slideshow, or kinetic promo. The music drives all pacing; any user-supplied images/videos are cut onto the same beat grid, and a complete video needs zero assets. Narrated pieces → the input-matched workflow (see /hyperframes). Unclear → /hyperframes.

pr-to-video

Turn a GitHub pull request (a PR URL, owner/repo#N, or

remotion-to-hyperframes

Port an existing Remotion (React) composition

slideshow

>

talking-head-recut

Package an existing talking-head / interview / podcast video with timed, designed GRAPHIC OVERLAY cards — kinetic titles, lower-thirds, data callouts, quotes, side panels, picture-in-picture — synced to the transcript, on a 16:9 / 9:16 / 4:5 canvas of your choice; the clip plays untouched underneath. Trigger on

관련 스킬