hyperframes-read-first

HyperFrames CLI dev loop — `npx hyperframes` for scaffolding (init), validation (lint, inspect), preview, render, and environment troubleshooting (doctor, browser, info, upgrade). Use when running any of these commands or troubleshooting the HyperFrames build/render environment. For asset preprocessing commands (`tts`, `transcribe`, `remove-background`), invoke the `hyperframes-media` skill instead.

HyperFrames의 모든 애니메이션 지식 — 원자적 모션 규칙, 다중 단계 씬 청사진, 씬 전환, 광범위한 모션 디자인 기법, 그리고 7개의 런타임 어댑터(GSAP 기본, Lottie, Three.js, Anime.js, CSS 키프레임, Web Animations API, TypeGPU). 모든 모션 또는 애니메이션 작업에 사용: 2-4개의 규칙을 선택하여 구성하거나, 청사진을 로드하거나, 런타임별 API(GSAP 이징 / Lottie 플레이어 / Three.js 믹서 등)를 조회합니다. HyperFrames 네이티브: 단일 일시 정지 타임라인, 시크 안전,...

HyperFrames HTML 구성 계약. 구성 구조, 데이터 속성, 클립, 트랙, 하위 구성, 변수, 미디어 재생, 결정적 렌더링 규칙 및 최소 렌더링 가능 프로젝트의 검증에 사용합니다.

HyperFrames 컴포지션을 위한 에셋 전처리 — 다중 제공자 TTS(HeyGen / ElevenLabs / Kokoro 로컬), 다중 제공자 BGM(Google Lyria / 로컬 MusicGen), Whisper 전사, 배경 제거 및 캡션 작성. npx hyperframes tts, bgm, transcribe, remove-background, voice/provider 선택, music-mood 프롬프팅, captions / subtitles / lyrics / karaoke / per-word 스타일링에 사용합니다.

레지스트리 블록과 컴포넌트를 HyperFrames 구성에 설치하고 연결합니다. hyperframes add 실행 시, 블록이나 컴포넌트 설치 시, 설치된 항목을 index.html에 연결할 때, 또는 hyperframes.json 작업 시 사용합니다. add 명령어, 설치 위치, 블록 하위 구성 연결, 컴포넌트 스니펫 병합, 레지스트리 검색, 그리고 업스트림에 기여할 새 블록이나 컴포넌트 작성(아이디어 → 스캐폴드 → 검증 → PR)을 다룹니다.

사용자 정의 HyperFrames HTML 비디오 구성 제작 시 전용 워크플로가 적합하지 않을 때 대체 도구로 사용합니다. 긴 길이 또는 여러 장면의 작품, 브랜드/시즐 릴, 몽타주, 타이틀 카드, 모션 포스터, 정적 루프, 모든 길이와 형식의 자유로운 구성을 다룹니다. 마케팅 제품 프로모션(product-launch-video), 일반 웹사이트-투-비디오 캡처(website-to-video), 주제 설명(faceless-explainer), GitHub PR 비디오(pr-to-video), 기존 영상 자막 처리 등에는 사용되지 않습니다.

사용자가 모션이 메시지가 되는 짧고 디자인 중심의 모션 그래픽을 원할 때 사용합니다: 키네틱 타이포그래피, 숫자/통계 카운트업, 차트/데이터 시각화 히트, 로고 스팅, 브랜드 록업, 하단 서드, 콜아웃, 소셜 오버레이, 애니메이션 헤드라인/트윗/뉴스 아이템, 모션 포스터, 또는 빠른 캡처 페이지 하이라이트. 일반적으로 10초 미만에서 최대 약 30초이며, 내레이션 구성, 음성 해설, 또는 실사 피사체가 없습니다. MP4 또는 투명 오버레이로 렌더링 가능합니다. 더 길고, 여러 장면이 있거나, 내레이션이 포함되거나, 브랜드 릴 형식의 작업에는 적합하지 않습니다...

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