HyperFrames Motion
모든 모션 지식을 하나의 스킬로: 규칙(원자적 레시피), 청사진(다중 단계 장면 템플릿), 전환(장면 간), 기법(광범위한 모션 디자인 패턴), 그리고 어댑터(런타임별 API).
구성 계약(데이터 속성, 하위 구성, 결정론)은 /hyperframes → core/를 참조하세요.
기본: 원자적 규칙 구성
rules-index.md에서 2-4개의 규칙을 선택하고, 단일 일시 중지된 GSAP 타임라인으로 연결하면 됩니다. 청사진에서 시작하는 것보다 빠르고 코드도 적게 생성됩니다.
청사진 로드하기
- 장면이 기존에 설계된 다중 단계 템플릿(브랜드 리빌, 소셜 프루프, 데모 페이지 스크롤 스포트라이트 등)과 일치하고, 해당 단계 파이프라인을 재사용하면 제작 시간이 절약되는 경우
- 4-5단계의 복잡한 안무를 위한 실행 가능한 기본 코드가 필요한 경우
청사진은 blueprints-index.md에 있습니다. 각 항목은 blueprints/<id>.md(레시피)와 examples/<id>.html(실행 가능한 샘플)을 가리킵니다. 추측성으로 읽지 마세요. 장면 수준의 오케스트레이션이 필요하다고 결정한 후에 로드하세요.
라우팅
| 원하는 작업… | 읽을 파일 |
|---|---|
| 트리거/태그별로 원자적 모션 패턴 선택하기 | rules-index.md |
| 하나의 규칙에 대한 전체 HTML / CSS / GSAP 레시피 읽기 | rules/<name>.md |
| 다중 단계 장면 템플릿 선택하기 | blueprints-index.md |
| 청사진의 전체 레시피 읽기 | blueprints/<id>.md + examples/<id>.html |
| 장면 전환 제작하기(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 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 내 타임라인 구성 금지). 여기서 다시 언급하지 않습니다.
핵심 계약 위에 추가된 애니메이션 제작 규칙:
- 사전 계산된 레이아웃 상수 — 트윈 시간에
getBoundingClientRect()로 위치를 도출하지 마십시오. 트윈 시간 DOM 측정은 렌더러가 병렬로 샘플링하기 때문에 동기화가 깨집니다. 구성 설정 시 한 번 좌표를 계산하고 재사용하십시오. - 공간 모션은 GSAP 변환 별칭만 사용 (
x,y,scale,rotation). 코어의 허용 목록은 비공간 속성 트윈을 위해opacity/color/backgroundColor/borderRadius도 허용하지만 — 레이아웃 변경을 위해width/height/top/left는 절대 사용하지 마십시오.
스크립트
node skills/hyperframes-motion/scripts/animation-map.mjs <composition-dir> \
--out <composition-dir>/.hyperframes/anim-map
window.__timelines에 등록된 모든 GSAP 타임라인을 읽고, 트윈을 열거하고, bbox를 샘플링하고, 플래그를 계산하여 animation-map.json을 출력합니다. 제작 후 안무(데드 존, 스태거 일관성, 수명 주기 경고)를 감사하는 데 사용하세요.
함께 보기
/hyperframes→core/— 구성 구조, 데이터 속성, 하위 구성, 결정론적 렌더링 계약/hyperframes-design— 팔레트, 타이포그래피, 비트 계획(비애니메이션 창작 방향)/hyperframes→cli/—npx hyperframes lint / validate / inspect / preview / render