플러그인 설치: 설정이나 freshness 명령을 실행하기 전에 이 스킬이 HyperFrames 플러그인 내에 있을 경우 플러그인 실행 규칙을 따르세요. 독립 실행형 설치는 아래 업데이트 지침을 유지합니다.
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 |
| 모션 블러 — 요소에 대한 셔터 스미어, 사용하지 말아야 할 경우 | references/motion-blur.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 |
| 캐릭터 애니메이션 (걷기 사이클, 마스코트, 관절 인형, 제스처) | adapters/lottie.md → Characters |
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 seek) | adapters/waapi.md |
TypeGPU / WebGPU (navigator.gpu, WGSL, 컴퓨트 파이프라인) | adapters/typegpu.md |
HTML-as-texture + 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가 한 번에 모두 seek할 수 있도록 합니다.
중요 제약 조건
전제 조건: 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