플러그인 설치: 설정 또는 갱신 명령을 실행하기 전에 이 스킬이 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 사용 금지, 유한한 루트 data-duration 없이 repeat: -1 사용 금지, 이후 장면 클립에 페이지 로드 시 gsap.set 금지, display 또는 원시 visibility 트윈 금지, 타임라인을 완전히 구축한 후에만 등록(빌드가 document.fonts.ready와 같은 비동기 콜백 내에서 실행될 때 포함). GSAP autoAlpha 및 명시적 타임라인 경계에서의 지속 시간 없는 가시성 설정은 핵심에서 허용됩니다. 이러한 예외는 클립 내부의 클립이 아닌 요소나 래퍼에만 사용하세요. 프레임워크가 .clip 라이프사이클을 소유합니다. 여기서 전체 계약을 반복하지 마십시오.
핵심 계약 위에 추가되는 애니메이션 제작 사항:
- 사전 계산된 레이아웃 상수 — 트윈 시간에
getBoundingClientRect()에서 위치를 절대 도출하지 마십시오. 트윈 시간 DOM 측정은 렌더러가 병렬로 샘플링하기 때문에 동기화가 해제됩니다. 구성 설정 시 한 번 좌표를 계산하고 재사용하십시오. - 공간 모션은 GSAP 변환 별칭만 사용 (
x,y,scale,rotation). 핵심의 허용 목록은 비공간 속성 트윈에 대해opacity/color/backgroundColor/borderRadius도 허용하지만 — 레이아웃 변경을 위해width/height/top/left는 절대 사용하지 마십시오.
스크립트
node <SKILL_DIR>/scripts/animation-map.mjs <composition-dir> \
--out <composition-dir>/.hyperframes/anim-map
window.__timelines에 등록된 모든 GSAP 타임라인을 읽고, 트윈을 열거하고, bbox를 샘플링하고, 플래그를 계산하고, 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