hyperframes

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 입력 또는 명명된 레시피는 인테이크를 변경하지만 라우팅은 변경하지 않습니다. 인터뷰의 "Adapt orthogonal inputs" 섹션이 둘 다 처리합니다.

프로젝트의 CLI를 최신 상태로 유지

스캐폴딩된 프로젝트는 package.json 스크립트에 hyperframes@<version>을 고정하여 렌더링을 재현 가능하게 합니다. 핀은 자동으로 업데이트되지 않으며, 이전 CLI의 고정된 실행은 이에 대한 경고를 출력하지 않습니다. 스크립트에 핀이 있는 프로젝트를 재개할 때, 첫 번째 렌더링 영향 명령 전에 한 번 프로브하십시오:

npx hyperframes@latest upgrade --project . --check

프로브는 읽기 전용이며 최신 릴리스에 대한 핀을 보고합니다. 명시적인 .을 유지하십시오. 이전 CLI 릴리스에서는 --project 바로 뒤에 다른 플래그가 오면 해당 플래그를 디렉토리 값으로 소비합니다. 프로젝트가 뒤쳐져 있다고 보고하거나, CLI 출력에 이미 표시된 경우(stderr 알림 This project pins hyperframes@… (latest …), 또는 고정된 스크립트의 --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	PR 참조에서 GitHub 풀 리퀘스트 또는 코드 변경 사항 설명	/pr-to-video
8	URL 또는 사이트별 브리핑에서 웹사이트, 제품 사이트, 앱 또는 회사 마케팅 또는 소개	/product-launch-video
9	제품 또는 사이트 캡처 없이 발명된 시각 자료로 주제, 기사 또는 노트 설명	/faceless-explainer
10	기타 모든 사용자 지정 영상 또는 컴포지션	/general-video

경로를 최종 확정하기 전에 references/routes/<workflow>.md를 읽으십시오. 각 경로당 하나의 작은 파일로, 표준 입력/출력/트리거 계약(지연 설치된 워크플로우 스킬이 있기 전에 사용 가능)과 해당 경로의 인터뷰 항목이 포함되어 있습니다. 후보가 계약을 충족하지 않으면 강제로 일치시키지 말고 계속 라우팅하십시오. 일치하는 경로의 파일만 읽으십시오.

일반적인 모호성 해결

• 짧은 애니메이션 제목, 로고 스팅, 통계 히트, 차트 히트, 지도 히트 또는 독립형 하단 1/3은 내레이션이 없고 모션이 메시지인 경우 /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 <workflow-name>

/ 없이 베어 이름을 사용하십시오. 명령이 실패하면 오류를 표시하고 메모리에서 워크플로우를 재구성하지 마십시오. 설치에 관한 기타 모든 사항(코어 대 지연 분할, 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-audio
초기화, 린트, 검사, 스냅샷, 비교, 배치 렌더링, 스튜디오, 렌더링, 게시 또는 진단	/hyperframes-cli
레지스트리 블록 및 컴포넌트	/hyperframes-registry
Figma 자산, 토큰, 컴포넌트 또는 재구성된 모션으로서의 스토리보드 프레임	/figma

크리에이터 편집 구문은 도메인 간 요청입니다. 일치하는 행에 명명된 모든 스킬을 로드하십시오:

크리에이터 요청	필요한 도메인
"이 영상 잘라", 하드 컷, 트림, 접합, 재정렬 또는 소스 범위 사용	/general-video + /hyperframes-core; 코어는 data-start, data-duration, data-media-start 및 트랙 레이아웃을 소유합니다.
여기 확대, 확대/축소, 부드러운 다중 상태 확대/축소 또는 리프레임, 켄 번스 효과 또는 카메라 이동	/general-video + /hyperframes-core + /hyperframes-keyframes; 시간 클립이 아닌 내부 시각적/크롭 래퍼에 애니메이션 적용.
매치 컷 또는 휩팬 카메라 전환	/general-video + /hyperframes-animation + /hyperframes-keyframes + /hyperframes-registry; 수동 제작 전에 전환 프리미티브 검색/설치.
페이드, 크로스페이드, 트랙 게인/볼륨, 자동화, 덕/조각 또는 오디오 효과	/general-video + /hyperframes-core + /hyperframes-audio; 코어는 클립을 배치하고, 오디오는 배치된 트랙을 믹싱합니다.
컷과 카메라 이동 또는 믹싱을 결합한 사진 및 사운드 편집	/general-video + /hyperframes-core + 시각적 모션이 있을 때 /hyperframes-keyframes + 사운드가 페이드, 믹싱, 덕, 자동화 또는 처리될 때 /hyperframes-audio.
미디어 소싱/생성 또는 지원되지 않는 속도 램프/중간 소스 프리즈 전처리	/media-use; 소싱/생성/전처리만, 배치된 트랙 믹싱은 안 됨.

상수 data-playback-rate는 사진 및 피치 보존 사운드에 대해 렌더링 안전합니다. 소스 속도 램프를 키프레임 가능하게 만들지 않습니다. 램프를 전처리하십시오. 복사 가능한 편집 계약을 위해 /hyperframes-core → references/creator-editing-recipes.md를 로드하십시오.

사진 미디어의 외관이나 동작에 대한 광범위한 피드백은 사용자가 "색보정" 또는 "효과"를 언급하지 않더라도 /media-use로 라우팅됩니다.