HyperFrames 애니메이션
하나의 스킬에 모든 모션 지식을 담았습니다: 규칙(원자적 레시피), 블루프린트(다중 단계 씬 템플릿), 전환(씬 간), 기법(광범위한 모션 디자인 패턴), 어댑터(런타임별 API).
컴포지션 계약(데이터 속성, 하위 컴포지션, 결정론)에 대해서는 hyperframes-core를 참조하세요.
기본: 원자적 규칙 구성
rules-index.md에서 2-4개의 규칙을 선택하고, 일시 중지된 단일 GSAP 타임라인으로 결합하면 됩니다. 이 방법이 블루프린트에서 시작하는 것보다 빠르고 코드도 적게 생성됩니다.
블루프린트를 로드하는 경우
- 씬이 기존에 설계된 다중 단계 템플릿(브랜드 리빌, 소셜 프루프 등)과 일치하고, 해당 단계 파이프라인을 재사용하면 실제 작성 시간을 절약할 수 있는 경우
- 복잡한 4-5단계 안무에 대한 실행 가능한 실제 코드가 필요한 경우
블루프린트는 blueprints-index.md에 있습니다. 각 항목은 blueprints/<id>.md(레시피)를 가리킵니다. 추측성으로 읽지 마세요. 씬 수준 오케스트레이션이 필요하다고 결정한 후에 로드하세요.
라우팅
| 원하는 작업 | 읽을 파일 |
|---|---|
| 트리거/태그로 원자적 모션 패턴 선택 | rules-index.md |
| 하나의 규칙에 대한 전체 HTML/CSS/GSAP 레시피 읽기 | rules/<name>.md |
| 다중 단계 씬 템플릿 선택 | blueprints-index.md |
| 하나의 블루프린트에 대한 전체 레시피 읽기 | blueprints/<id>.md |
| 씬 전환 작성(CSS 기반, 두 클립 간) | transitions/overview.md, transitions/catalog.md |
| 광범위한 모션 디자인 기법 조회 | techniques.md |
| 기존 컴포지션의 애니메이션 맵 분석 | scripts/animation-map.mjs |
| GSAP API — 타임라인/트윈/위치 매개변수 | adapters/gsap.md |
| GSAP — 즉시 사용 가능한 효과 레시피 | rules/gsap-effects.md |
| GSAP — 트랜스폼/성능 | adapters/gsap-transforms-and-perf.md |
| GSAP — 이징/스태거 | adapters/gsap-easing-and-stagger.md |
| GSAP — 타임라인/레이블 | adapters/gsap-timeline-and-labels.md |
Lottie/dotLottie (After Effects 내보내기, window.__hfLottie) | adapters/lottie.md |
Three.js/WebGL (3D 씬, AnimationMixer, hf-seek) | adapters/three.md |
Anime.js (window.__hfAnime) | adapters/animejs.md |
CSS 키프레임 (animation-delay / play-state / fill-mode) | adapters/css-animations.md |
Web Animations API (element.animate(), currentTime 탐색) | adapters/waapi.md |
TypeGPU/WebGPU (navigator.gpu, WGSL, 컴퓨트 파이프라인) | adapters/typegpu.md |
HTML-텍스처 + WebGL/GLSL 포스트 FX (drawElementImage으로 라이브 DOM 캡처) | adapters/html-in-canvas-patterns.md |
명명된 텍스트 애니메이션 효과 (외부 animate-text 스킬을 통한 24개 ID) | adapters/animate-text.md |
런타임 선택
- GSAP은 95%의 모션 작업에 기본값 — 타임라인 오케스트레이션, 트랜스폼, 이징, 스태거를 포함합니다. 이 스킬의 모든 원자적 규칙은 GSAP 기반입니다.
- Lottie는 자체 사전 제작 타임라인이 있는 에셋(일반적으로 After Effects 내보내기)에 사용합니다.
- Three.js는 3D 씬, 카메라 모션, 셰이더 기반 비주얼에 사용합니다.
- Anime.js는 GSAP이 과도한 경우 가벼운 트위닝에 사용합니다.
- CSS는 단순한 반복 모티프, 장식, 샤이머에 사용 — JavaScript 애니메이션 비용이 없습니다.
- WAAPI는 GSAP 종속성 없이 기본 브라우저 키프레임에 사용합니다.
- TypeGPU/WebGPU는 GPU 렌더링 캔버스(파티클, 액체 유리, 커스텀 셰이더)에 사용합니다.
하나의 컴포지션에서 여러 런타임이 공존할 수 있습니다. 각 런타임은 런타임별 전역 객체에 인스턴스를 등록하여 HyperFrames가 한 번의 패스로 모두 탐색할 수 있도록 합니다.
중요한 제약 조건
전제 조건: hyperframes-core → 양보할 수 없는 규칙 (단일 일시 중지 타임라인, data-duration이 길이를 결정, Math.random/Date.now/performance.now 사용 금지, repeat: -1 금지, 이후 씬 클립에 대해 페이지 로드 시 gsap.set 금지, display 또는 원시 visibility 트윈 금지, async/setTimeout/Promise 내부에서 타임라인 구성 금지). GSAP autoAlpha와 명시적 타임라인 경계에서의 기간 제로 가시성 설정은 코어에서 허용됩니다. 이러한 예외는 클립 내부의 비클립 요소나 래퍼에만 사용하세요. 프레임워크가 .clip 수명 주기를 관리합니다. 전체 계약을 여기서 다시 설명하지 마십시오.
코어 계약 위에 추가되는 애니메이션 제작 규칙:
- 사전 계산된 레이아웃 상수 — 트윈 시간에
getBoundingClientRect()에서 위치를 절대 도출하지 마십시오. 트윈 시간 DOM 측정은 렌더러가 병렬로 샘플링하기 때문에 동기화가 해제됩니다. 컴포지션 설정 시 한 번 좌표를 계산하고 재사용하세요. - 공간 모션에는 GSAP 트랜스폼 별칭만 사용 (
x,y,scale,rotation). 코어의 허용 목록은 비공간 속성 트윈에 대해opacity/color/backgroundColor/borderRadius도 허용하지만, 레이아웃 변경을 위해width/height/top/left는 절대 사용하지 마십시오.
스크립트
node skills/hyperframes-animation/scripts/animation-map.mjs <composition-dir> \
--out <composition-dir>/.hyperframes/anim-map
window.__timelines에 등록된 모든 GSAP 타임라인을 읽고, 트윈을 열거하고, 바운딩 박스를 샘플링하고, 플래그를 계산하여 animation-map.json을 출력합니다. 작성 후 안무(데드 존, 스태거 일관성, 수명 주기 경고)를 감사하는 데 사용하세요.
animation-map.mjs는 먼저 현재 프로젝트에서 헬퍼 패키지를 확인한 다음, 번들된 HyperFrames 패키지 버전을 부트스트랩할 수 있습니다. 번들 CLI/스킬 설치 외부에서 스킬을 실행하고 부트스트랩 버전을 명시적으로 고정해야 하는 경우에만 HYPERFRAMES_SKILL_PKG_VERSION=<version>을 설정하세요.
참고
hyperframes-core— 컴포지션 구조, 데이터 속성, 하위 컴포지션, 결정론적 렌더링 계약hyperframes-creative— 팔레트, 타이포그래피, 나레이션, 비트 계획 (비애니메이션 크리에이티브 방향)hyperframes-cli—npx hyperframes lint / check / snapshot / preview / render