플러그인 설치: 설정 또는 새로고침 명령 전에, 이 스킬이 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을 텍스처로 + 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 및 0-지속 시간 가시성 설정은 코어에서 허용됩니다. 이러한 예외는 클립 내부의 비클립 요소나 래퍼에만 사용하십시오; 프레임워크가 .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 타임라인을 읽고, 트윈을 열거하고, 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