HyperFrames Core
HyperFrames는 HTML로부터 비디오를 렌더링합니다. 컴포지션은 data-* 속성으로 타이밍을 선언하고, 애니메이션 런타임이 seek 가능하며, 미디어 재생이 프레임워크에 의해 소유되는 HTML 파일입니다.
이것은 컴포지션 계약입니다 — 하나의 hyperframes 프로젝트를 구축하는 방법입니다. 본문은 빌드 가이드입니다. 주제별 세부 정보는 references/에 있으며(다음 인덱스), 필요 시 읽으십시오. 다른 사항은 동일한 스킬의 형제 섹션인 ../cli(개발 루프)와 ../registry(블록/컴포넌트 설치) 및 형제 디자인 스킬인 /hyperframes-motion(애니메이션 레시피)과 /hyperframes-design(팔레트, 타이포그래피, 프레임 프리셋)에 있습니다. ../SKILL.md의 기능 맵은 각각이 다루는 내용을 설명합니다.
참조
| 파일 | 읽을 때... |
|---|---|
references/minimal-composition.md | 가장 작은 렌더러블 컴포지션 스켈레톤부터 시작하려면 |
references/composition-patterns.md | 모놀리식 vs 모듈식 선택; 모듈식 index.html 구조화; 서브 컴포지션 아키타입 선택 |
references/data-attributes.md | 모든 data-*(루트/클립/서브 컴포지션 호스트/레거시 별칭) 조회; class="clip" 사용 |
references/tracks-and-clips.md | data-track-index 선택, 동일 트랙 오버랩/z-인덱스 처리, 다른 클립 기준 클립 타이밍 조정 |
references/sub-compositions.md | 서브 컴포지션 연결(호스트 속성, <template>, 인스턴스별 변수) 및 내부 애니메이션 |
references/variables-and-media.md | 변수 선언; 시각적 전용 재생을 위한 <video> 배치 |
references/determinism-rules.md | seek 가능한 타임라인 구축; 결정론 금지 사항; 애니메이션 가능 속성 허용 목록; 레이아웃/텍스트 맞춤 |
references/full-screen-motion.md | 공유 배경이 있는 전체 프레임 모션 작성 |
references/storyboard-format.md | STORYBOARD.md 계획 작성(+ 파싱된 매니페스트) |
references/subagent-dispatch.md | 서브 에이전트 디스패치 동사(병렬 팬아웃/백그라운드/대기)를 하네스에 매핑 |
references/tailwind.md | Tailwind v4 프로젝트 작업(init --tailwind; 런타임 계약은 Studio의 v3와 다름) |
애니메이션 런타임 세부 사항(GSAP API, Lottie, Three.js 등)은 /hyperframes-motion → adapters/<runtime>.md로 이동하십시오.
컴포지션 빌드
두 가지 루트 형태 (상호 교환 불가)
- 독립형 (최상위
index.html) — 루트<div data-composition-id="…">가<body>안에 직접 위치하며,<template>래퍼 없음 (래핑하면 모든 콘텐츠가 숨겨지고 렌더링이 깨집니다). - 서브 컴포지션 (
data-composition-src를 통해 로드) — 루트는 반드시<template>안에 래핑되어야 합니다.
⚠ 전송 규칙: 런타임은
<template>콘텐츠만 복제합니다. 외부의 모든 것(<head>스타일/스크립트 포함)은 폐기됩니다 —<style>/<script>는 템플릿 내부에 두십시오. ⚠ 호스트 ID 규칙: 호스트 슬롯의data-composition-id는 내부 템플릿의data-composition-id및window.__timelines["<id>"]키와 정확히 일치해야 합니다 —-mount/-slot/-host접미사 없음.
파일 형태, 호스트 연결 및 사전 렌더링 체크리스트 → references/sub-compositions.md.
루트는 크기를 지정해야 함 (무음 레이아웃 버그)
독립형 루트는 명시적인 크기 박스(width/height in px)가 필요하며, height:100% 요소까지의 모든 상위 요소는 확인된 높이를 가져야 합니다. 그렇지 않으면 flex/100% 자식이 ~0으로 줄어들고 콘텐츠가 왼쪽 상단 모서리에 쌓입니다. lint/validate/inspect는 이를 포착하지 못합니다. 스켈레톤 → references/minimal-composition.md.
하나의 일시 중지된 타임라인
각 컴포지션은 페이지 로드 시 동기적으로 빌드된, window.__timelines["<id>"]에 있는 정확히 하나의 gsap.timeline({ paused: true })를 등록합니다(키 = 루트 data-composition-id). 렌더 기간 = 루트 data-duration, 타임라인 길이가 아닙니다. 서브 타임라인을 호스트에 수동으로 중첩하지 마십시오. 전체 계약(비-GSAP 런타임 포함) → references/determinism-rules.md + /hyperframes-motion/adapters/.
양보할 수 없는 규칙 (lint/validate/inspect가 포착하지 못하는 무음 버그)
여기에 표시됩니다. 전체 근거는 링크된 참조에 있습니다. 위반하지 마십시오:
- 렌더링 시간 시계/시드되지 않은
Math.random/네트워크/입력 상태 없음;repeat: -1없음(유한 횟수 사용). →determinism-rules.md - 시각적 속성 허용 목록만 애니메이션;
display/visibility절대 사용 금지; 이후 장면 클립에gsap.set없음. →determinism-rules.md - 본문 텍스트에
<br>없음; 변환된 요소는 블록 레벨 + 크기 지정되어야 함; 맥동하는 절대 장식 요소는 피크 여유 공간 필요. →determinism-rules.md <video>는 호스트 루트의 직접 자식이어야 함(절대 서브 컴포지션<template>/래퍼 내부에 두지 마십시오); 프레임워크가 재생을 소유합니다. →variables-and-media.md- 모든
id는 조립된 페이지에서 고유해야 함; 서브 컴포지션 내에서는 컴포지션 id로 id 접두사(#<id>-hero)를 지정하십시오. 중복된<video>/<img>id는 빈 화면을 렌더링합니다 — 프로듀서가getElementById로 프레임을 주입하며, 파일 간 중복은lint를 통과합니다. →composition-patterns.md - 전체 화면 장면 채우기는 전체 여백 자식(
position:absolute; inset:0)에 적용되며, 컴포지션 루트 자체에는 절대 적용하지 마십시오 — 프로듀서의 프레임 합성은 루트 요소 자체의background를 드롭할 수 있습니다(프레임이 검정색으로 렌더링됨). 미리보기/snapshot에서는 올바르게 표시되더라도 마찬가지입니다. →composition-patterns.md
기존 컴포지션 편집
- 먼저 파일을 읽으십시오. 관련 없는 타이밍, 트랙, ID, 변수, 미디어 경로를 보존하십시오.
- 기존 컴포지션 ID 및 타임라인 키와 일치시키십시오.
- 클립 추가: 겹치지 않는
data-track-index를 선택하거나 의도적으로 주변 타이밍을 조정하십시오. - 서브 컴포지션 추가: 호스트를 연결하기 전에 내부
data-composition-id를 확인하십시오.
유효성 검사
CLI 게이트를 실행하십시오(표준 lint / validate / inspect / snapshot / preview / render 체크리스트는 ../cli/SKILL.md → Workflow + Minimum Completion Gate 참조. 서브 컴포지션 프로젝트에 필요한 시각적 스모크 테스트 포함).