HyperFrames 진입점
HyperFrames는 HTML에서 비디오를 렌더링합니다. 컴포지션은 DOM이 data-* 속성으로 타이밍을 선언하는 HTML 파일이며, 애니메이션 런타임은 탐색 가능하고 미디어 재생은 프레임워크가 소유합니다. 전체 작성 규약은 /hyperframes-core에 있습니다. 컴포지션 HTML을 작성하기 전에 먼저 읽어야 합니다.
1. 프로젝트 상태에서 시작
다음 중 첫 번째로 일치하는 행을 적용하고, 하위 상태 행은 평가하지 마세요:
| 상태 | 액션 |
|---|---|
| 기존 Remotion 소스를 HyperFrames로 명시적 포팅 | references/routes/remotion-to-hyperframes.md를 읽은 다음, 해당 워크플로우로 직접 라우팅합니다. 인텐트 레이어를 건너뜁니다. |
| 기존 HyperFrames 프로젝트에 대한 특정 작업: 검사, 진단, 검증, 미리보기, 렌더링, 게시, 배치 렌더링 | 해당 작업만 수행합니다. 인텐트 및 워크플로우 라우팅을 건너뛰고, /hyperframes-cli 및 필요한 도메인 스킬을 로드합니다. |
| 기존 프로젝트에 대한 특정 편집 | 편집을 수행합니다. 인텐트 레이어를 실행하지 마세요. |
BRIEF.md가 존재함 | workflow와 flow를 읽습니다. 해당 워크플로우를 실행합니다. flow: companion은 항상 /general-video에서 실행됩니다. 브리핑 질문을 하지 마세요. |
브리핑이 없지만 hyperframes.json 또는 STORYBOARD.md가 존재함 | 프로젝트 파일과 기록된 선호도에서 재개합니다. 기존 아티팩트에서 소유 워크플로우를 추론합니다. 고유하게 결정할 수 없으면 라우팅 전용 질문 하나만 하고, 인텐트 인터뷰는 실행하지 마세요. |
| 새로 생성 | 인텐트 레이어(references/intent-interview.md)를 실행한 후, § 2의 표를 사용하여 한 번 라우팅합니다. |
새 요청이 주제나 입력을 식별하지 못하면, 라우팅하기 전에 비디오의 주제를 물어보세요. 질문하기 전에 선호도와 레시피를 확인하세요(references/intent-interview.md, 1단계). figma.com 입력이나 명명된 레시피는 라우팅이 아닌 인테이크를 변경합니다. 인터뷰의 "적응형 직교 입력" 섹션이 둘 다 처리합니다.
프로젝트의 CLI를 최신 상태로 유지
스캐폴딩된 프로젝트는 렌더링 재현성을 위해 package.json 스크립트에 hyperframes@<버전> 핀을 고정합니다. 핀은 자동으로 업데이트되지 않으며, 이전 CLI의 핀 실행 시 경고가 출력되지 않습니다. 스크립트에 핀이 있는 프로젝트를 재개할 때, 첫 번째 렌더링 영향 명령 전에 한 번 프로브합니다:
npx hyperframes@latest upgrade --project . --check
프로브는 읽기 전용이며 핀과 최신 릴리스를 비교합니다. 명시적 .을 유지하세요. 이전 CLI 릴리스에서 bare --project 뒤에 다른 플래그가 오면 해당 플래그를 디렉터리 값으로 사용합니다. 프로젝트가 뒤쳐졌다고 보고하거나(또는 CLI 출력에 이미 This project pins hyperframes@… (latest …)라는 stderr 알림이나 핀된 스크립트의 --json 결과에 _meta.updateAvailable: true가 표시되면) npx hyperframes@latest upgrade --project .를 적용한 후 npx hyperframes check로 확인합니다. 통과된 확인은 프로젝트의 컴포지션이 새 버전에서 여전히 유효함을 확인합니다(렌더링 출력이 이전 핀과 프레임 동일하다는 의미는 아님). 따라서 성공적인 업데이트는 절대 조용하지 않습니다. 실행 요약에 이전 버전과 새 버전을 모두 명시하세요. 아직 컴포지션이 없는 프로젝트는 확인이 필요 없습니다. 확인이 실패하면 package.json 변경 사항을 되돌리고 핀된 버전에서 계속 진행한 후, 프로젝트가 어떤 버전에 머물러 있는지와 그 이유를 보고하세요. 신호를 중계하지 말고 직접 조치하세요. 확인되지 않은 핀 업데이트를 남겨두지 마세요.
2. 새 생성 라우팅
첫 번째 일치 행을 사용하세요. 요청된 결과물을 기준으로 매칭하고, 부차적으로 언급된 단어나 파일 유형이 아닙니다.
| 우선순위 | 요청 | 워크플로우 |
|---|---|---|
| 1 | 기존 Remotion 소스를 명시적으로 포팅 | /remotion-to-hyperframes |
| 2 | 프레젠테이션, 피치 덱, 탐색 가능한 인터랙티브 덱 제작 | /slideshow |
| 3 | 기존 토킹헤드 영상에 평문 자막 또는 캡션 추가(영상 변경 없이) | /embedded-captions |
| 4 | 기존 토킹헤드, 인터뷰, 팟캐스트 영상에 디자인된 그래픽 오버레이 추가(영상 변경 없이) | /talking-head-recut |
| 5 | 음악 트랙으로 비트 동기화 비디오 제작(내레이션 또는 웹사이트 캡처 없이) | /music-to-video |
| 6 | 명시적으로 짧고 내레이션이 없으며 모션 위주의 단위 생성(일반적으로 10초 미만) | /motion-graphics |
| 7 | GitHub PR 참조에서 PR 또는 코드 변경 사항 설명 | /pr-to-video |
| 8 | URL 또는 사이트별 브리핑에서 웹사이트, 제품 사이트, 앱 또는 회사 마케팅/시연 | /product-launch-video |
| 9 | 발명된 시각 자료와 제품/사이트 캡처 없이 주제, 기사 또는 노트 설명 | /faceless-explainer |
| 10 | 기타 모든 사용자 정의 비디오 또는 컴포지션 | /general-video |
라우트를 최종 결정하기 전에 references/routes/<워크플로우>.md를 읽으세요. 각 라우트당 하나의 작은 파일로, 표준 입력/출력/트리거 계약(지연 설치된 워크플로우 스킬이 있기 전에 사용 가능)과 해당 라우트의 인터뷰 항목이 포함되어 있습니다. 후보가 해당 계약을 충족하지 못하면 강제로 매칭하지 말고 계속 라우팅하세요. 매칭된 라우트의 파일만 읽으세요.
일반적인 모호성 해결
- 짧은 애니메이션 제목, 로고 스팅, 통계 히트, 차트 히트, 맵 히트 또는 독립형 하단 써드파티는 내레이션이 없고 모션이 메시지인 경우
/motion-graphics입니다. 정적 제목 카드, 내레이션이 있는 시퀀스, 더 긴 몽타주 또는 사용자 정의 루프는/general-video입니다. - 명시적으로 짧은 모션 그래픽은 URL, 트윗, 기사 또는 스크린샷을 소스 자료로 사용할 수 있습니다. "이 사이트에서 비디오 만들기"와 같은 일반 요청은
/product-launch-video입니다. - 기존 영상에 캡션을 추가하는 것은
/embedded-captions로, 정보 카드가 포함된 영상은/talking-head-recut으로 라우팅됩니다. 영상의 타이밍 재조정, 재정렬, 색상 변경, 프레임 변경 또는 리믹스는 사용자 정의 편집이며/general-video로 넘어갑니다. - 음악 파일은 비트 그리드가 작품을 구동할 때만
/music-to-video를 선택합니다. 배경 음악으로 사용되는 경우 주제 매칭 라우트를 재정의하지 않습니다. - "스토리보드를 원합니다"는 워크플로우가 아닌 검토 프로세스를 변경합니다. 다른 라우팅 신호가 없으면
/general-video를 사용합니다. 확인된 스케치 보드 자체가 요청된 결과물일 수 있습니다. 검토 루프가 해당 중단점을 정의합니다. - 전문적인 내러티브 워크플로우는 약 3분까지 지원하며 30~90초에 가장 강력합니다. 명확히 더 긴 작품은
/general-video로 라우팅합니다. 길이는 명시적 포트, 덱, 캡션, 오버레이 또는 음악 기반 결과물을 재정의하지 않습니다.
3. 한 번 라우팅한 후 종료
새 생성의 경우 인텐트 레이어(references/intent-interview.md)가 전체 대화(메모리, 트라이지, 피치 라운드, 필수 사항, 실행 형태, 핸드오프)를 실행하고 BRIEF.md를 작성하여 종료합니다. 브리핑은 워크플로우가 읽는 유일한 라우팅 아티팩트입니다. 이후에 이 스킬 또는 인터뷰를 다시 열지 마세요. 이후의 모든 "라우트가 무엇을 요구했는가?"에 대한 질문은 BRIEF.md에서 답하세요.
4. 워크플로우 설치 및 진입
선택한 워크플로우를 읽기 전에 워크플로우와 핵심 도메인 스킬을 설치하거나 업데이트하세요:
npx hyperframes skills update <워크플로우-이름>
/ 없이 베어 이름을 사용하세요. 명령이 실패하면 오류를 표시하고, 메모리에서 워크플로우를 재구성하지 마세요. 설치에 관한 다른 모든 사항(코어-대-지연 분할, init이 업데이트하는 대상, 진단, CI 옵트아웃, CLI 없는 폴백)은 references/skill-lifecycle.md에 있습니다.
5. 필요에 따라 도메인 스킬 로드
| 필요 사항 | 스킬 |
|---|---|
| 컴포지션 구조, 타이밍 속성, 트랙, 변수, 결정론 | /hyperframes-core |
| 모션 규칙, 씬 청사진, 전환, 런타임 어댑터 | /hyperframes-animation |
탐색 안전 GSAP, CSS, Anime.js, WAAPI, FLIP, 패스, 마스크, SVG, 3D 키프레임 또는 hyperframes keyframes 진단 | /hyperframes-keyframes |
| 디자인 사양, 컨셉, 팔레트, 타이포그래피, 내레이션, 비트 계획 | /hyperframes-creative |
| 이미지, 아이콘, 로고, 오디오, 캡션, 그레이드, LUT, 재사용 가능한 미디어 | /media-use |
| 초기화, 린트, 체크, 스냅샷, 비교, 배치 렌더, 스튜디오, 렌더, 게시 또는 진단 | /hyperframes-cli |
| 레지스트리 블록 및 컴포넌트 | /hyperframes-registry |
| 재구성된 모션으로서의 Figma 에셋, 토큰, 컴포넌트 또는 스토리보드 프레임 | /figma |
사진 미디어의 외관이나 동작에 대한 광범위한 피드백도 /media-use로 라우팅됩니다. 사용자가 "색보정" 또는 "효과"라고 말하지 않더라도 어둡고/평탄하고/지루한 영상 수정, 클립 스타일링, 얼굴 숨기기 또는 미디어 리빌 개선을 포함합니다. 치료(treatment)를 편집하기 전에 ../media-use/references/media-treatments.md를 먼저 읽으세요. 이 파일은 영상이 치료되는 방식을 규정하며, 미디어 사용 가능 여부를 결정하지 않습니다. 기존 정식 치료 프리미티브를 일반 LUT, CSS 필터/오버레이 또는 불투명도 트윈으로 대체하지 마세요. 텍스트/레이아웃/모션 전용 편집은 해당 도메인에 유지하세요.
중요한 사진 미디어가 포함된 빌드 중에는 최종 품질 패스에 하나의 grounded 미디어 폴리시 스캔을 포함하세요. 적절한 미디어를 변경하지 않고 그대로 두는 것은 유효한 결과입니다.
도메인 스킬은 종단 간 결과물의 소유권을 가져가지 않습니다. 활성 워크플로우에 필요한 것만 로드하세요.