플러그인 설치: 설정 또는 최신 상태 확인 명령 전에, 이 스킬이 HyperFrames 플러그인 내부에 있을 때 플러그인 실행 규칙을 따릅니다. 독립 실행형 설치는 아래 업데이트 지침을 유지합니다.
먼저, 이 스킬을 최신 상태로 유지 — 실행 전에 사용자 확인:
npx hyperframes skills update motion-graphics. 모든 것이 최신 상태이면 빠른 no-op; 그렇지 않으면 이 스킬과 이에 의존하는 핵심 도메인 스킬을 새로 고칩니다.
figma 소스: 빌드할 로고/에셋/애니메이션이 figma.com URL에서 오는 경우, 먼저
/figma를 실행 — 에셋 익스포트, 브랜드 토큰, 그리고 그래픽이 Figma Motion 가져오기인 경우 Motion→GSAP 변환 — 그런 다음 출력을 기반으로 빌드합니다. 원시 MCP 도구를 통해 직접 Figma를 구동하지 마십시오. SVG 정리,.media/manifest.jsonl출처, 브랜드 토큰var()바인딩을 건너뛰므로 나중에 브랜드 변경이 전체 재가져오기 없이 전파될 수 없습니다.
motion-graphics — 디스패치 진입점
정문은
/hyperframes입니다. 이 스킬은 짧고, 디자인 중심이며, 내레이션이 없는 모션 그래픽(운동 자체가 메시지; ~10초 미만, 음성 해설 없음)을 만듭니다. 그보다 길거나, 내레이션이 있거나, 여러 장면인 경우 — 또는 불확실한 경우 → 먼저/hyperframes를 읽으십시오: 의도 레이어가 모든 경로 결정을 소유합니다.
이 워크플로우는 설계상 자율적입니다. 최대 한 가지 명확한 질문(agents/director.md) 후 중간 검토 없이 빌드하고 검증합니다. 의도 레이어(/hyperframes → references/intent-interview.md)는 실행 형태 질문 없이 여기로 직접 라우팅합니다. 스토리보드와 동반 세션은 이렇게 짧은 작품에 거의 도움이 되지 않습니다. 렌더링은 여전히 사용자 제어: 검사와 증명 스냅샷이 통과한 후, Studio 미리보기를 열고 ../hyperframes/references/brief-contract.md의 표준 "지금 렌더링할까요, 아니면 변경할까요?" 질문을 합니다. BRIEF.md가 있으면 디렉터 질문 전에 읽습니다.
짧은 디자인 중심의 모션 그래픽. 에셋 우선: 샷을 디자인하기 전에 에셋 전략을 결정하고 실제 재료를 소싱한 다음, 가지고 있는 재료를 중심으로 샷을 디자인하고, 카탈로그 기능을 재사용하여 구성합니다. 모든 아티팩트는 PROJECT_DIR = videos/<project-name>/(Step 0에서 생성) 아래에 기록됩니다. 아래 모든 경로는 상대 경로입니다.
| 단계 | 실행 | 주요 아티팩트 | 상세 흐름 |
|---|---|---|---|
| init | Bash | hyperframes.json | Step 0 |
| plan | 서브에이전트 — 검색 여부 결정? + 분류 + 에셋 전략 | shot-plan.json (초안: 카테고리, asset_needs 쿼리, 개요) | agents/director.md (Part 1) |
| source ◇ | Bash — 미디어 사용 확인 (asset_needs가 비어 있으면 건너뜀) | assets/ + assets/index.md | phases/source/guide.md |
| design | 서브에이전트 — 확인된 에셋을 기반으로 샷 디자인 | shot-plan.json (최종: 블록 + 레이아웃 + 모션 + 위치) | agents/director.md (Part 2) |
| build | 서브에이전트 — 재사용 우선 구성 | compositions/index.html | agents/builder.md |
| verify | Bash — lint, check, 증명 스냅샷; 실패 시 수리 | snapshots/contact-sheet.jpg | Step 5 |
| approve | 미리보기 열기; 렌더링 또는 변경 질문; 답변 대기 | 명시적 렌더링 승인 | Step 6 |
| render | Bash — hyperframes render (MP4, 또는 오버레이용 --format webm/mov) | renders/video.mp4 또는 투명 오버레이 | Step 6 |
◇ source는 선택한 카테고리가 에셋을 선언한 경우에만 실행됩니다. 순수 코드/텍스트 카테고리(예: kinetic-type, 대부분의 charts/stat)는 asset_needs: []를 가지며 계획에서 바로 디자인으로 건너뜁니다.
카테고리 — 검색 결정에 따라 분할
plan의 첫 번째 결정은: 검색이 필요한가? 입니다. 이 분기가 카테고리를 두 그룹으로 나눕니다. 그런 다음 특정 카테고리가 선택됩니다 — 검색 기반의 경우, 검색이 반환하는 콘텐츠 유형에 따라 결정됩니다. 각 카테고리는 하나의 categories/<id>/module.md(계획 및 빌드 규칙)입니다. 공유 모션 어휘는 references/motion-vocabulary.md에 있습니다(→ hyperframes-animation 규칙/청사진 + 레지스트리 블록).
Form 카테고리 — 검색 없음; 사용자가 콘텐츠를 제공:
| 카테고리 | 의도 | 의존 |
|---|---|---|
kinetic-type | 강렬한 라인 / 인용문 / 제목, 모션 우선 텍스트 | caption-* 블록 + 애니메이션 규칙 |
stat | 단일 히어로 숫자 / 카운트업 + 링 | apple-money-count / rules/{counting-dynamic-scale, stat-bars-and-fills} |
charts | 막대 / 선 / 파이 / 경주 / 데이터 기반 % | data-chart 블록 |
logo-reveal | 로고 스팅 / 브랜드 락업 (사용자 로고) | logo-outro / rules/svg-path-draw |
lower-thirds | 이름 / 직함 바, 콜아웃, 소셜 오버레이 | caption-* + 레지스트리 오버레이 블록 |
maps | 지리적 모션 — 지역 강조, 장소 연결, 위치로 확대 (벡터 레인 또는 베이크된 베이스맵 레인) | us-map / world-map 계열 + bake-basemap.mjs |
검색 기반 카테고리 — 먼저 검색한 다음 콘텐츠 유형에 따라 애니메이션 적용 (RWA 경로):
| 반환된 콘텐츠 | 카테고리 | 애니메이션 |
|---|---|---|
| 웹페이지 / 링크 | webpage | 웹페이지 / UI 애니메이션 (스크롤, 리빌, 커서, 콜아웃) |
| 뉴스 기사 | news | 헤드라인 리빌 + 소스 카드 + 주요 사실 콜아웃 |
| 트윗 | tweet | 애니메이션 트윗 카드 |
| 이미지 / 엔터티 | asset-fusion | 에셋의 지오메트리가 차트가 됨 (RWA 다이제틱 퓨전) |
빌드 순서: 한 번에 하나씩, 커버리지 우선(대략적인 것도 괜찮음). kinetic-type은 프로토타입에서 이식됨; 나머지는 따름.
사전 요구 사항
macOS Apple Silicon 또는 Linux x64. 시스템 도구: brew install node ffmpeg. npx hyperframes doctor를 한 번 실행합니다. macOS GPU 렌더링: export PRODUCER_BROWSER_GPU_MODE=hardware.
선택적 키(설정되지 않은 경우 로컬 폴백) — 미디어 사용을 통해 에셋을 소싱/생성하는 카테고리에만 필요:
| 키 | 용도 | 폴백 |
|---|---|---|
GEMINI_API_KEY / GOOGLE_API_KEY | 이미지 생성 (미디어 사용 확인) | 생성 건너뛰기 / 검색 전용 |
| (asset_scout / 검색 제공자) | webpage/news/tweet + asset-fusion 실제 에셋 검색 | 카테고리가 에셋 없음으로 저하됨 |
흐름
Step 0 — 초기화
cwd는 에이전트 작업공간 루트입니다. 모든 아티팩트를 PROJECT_DIR = videos/<project-name>/ 아래에 기록합니다. <project-name>: 사용자가 제공한 디렉토리를 사용하고, 그렇지 않으면 의도에서 짧은 케밥 케이스 이름을 사용합니다(<subject>-motion). 작업공간 기본 이름이나 타임스탬프는 사용하지 마십시오.
$PROJECT_DIR/hyperframes.json이 없는 경우에만:
PROJECT_DIR="${MOTION_GRAPHICS_DIR:-videos/<project-name>}"
mkdir -p "$(dirname "$PROJECT_DIR")"
npx hyperframes init "$PROJECT_DIR" --non-interactive --example=blank --skill=motion-graphics
init은 설치된 스킬을 GitHub의 최신 버전과 확인하고 오래된 것이 있으면 전역 세트를 업데이트합니다.
제약 조건: 작업공간 루트에서 hyperframes init을 절대 실행하지 마십시오. PROJECT_DIR 안에 다른 hyperframes/를 중첩하지 마십시오. 모든 Bash 명령(마스터 + 서브에이전트)은 (cd "$PROJECT_DIR" && ...) 서브셸입니다 — 절대 cd를 단독으로 사용하지 마십시오.
Step 1 — 계획 (서브에이전트: 디렉터 Part 1)
하나의 서브에이전트를 디스패치합니다. 프롬프트 = 전체 agents/director.md + ## Dispatch context (SKILL_DIR / PROJECT_DIR / 사용자 요청 / Schema: <SKILL_DIR>/references/shot-plan-ir.md). 다음을 수행해야 합니다:
- 결정: 검색이 필요한가? (첫 번째 분기)
- 아니오 → form 카테고리 선택 (kinetic-type / stat / charts / logo-reveal / lower-thirds / maps); 콘텐츠는 사용자 제공;
asset_needs: []. - 예 →
asset_needs[]에 검색 계획을 출력 (뉴스 / 웹 / 트윗 / 이미지; 양극 쿼리). 특정 검색 기반 카테고리(webpage / news / tweet / asset-fusion)는 Step 2에서 반환된 콘텐츠 유형에 의해 확인되고 Step 3에서 최종 확정됩니다.
- 아니오 → form 카테고리 선택 (kinetic-type / stat / charts / logo-reveal / lower-thirds / maps); 콘텐츠는 사용자 제공;
- 초안
shot-plan.json작성 (엔벨로프 + 선택한 form 카테고리 또는 검색 의도 +asset_needs+ 한 문단 분량의 샷 개요). 스키마:references/shot-plan-ir.md.
유효성 검사: [ -s "$PROJECT_DIR/shot-plan.json" ] && echo ok || echo missing.
Step 2 — 소싱 ◇ (Bash: 미디어 사용, 조건부)
shot-plan.json.asset_needs가 비어 있지 않으면 에셋을 확인합니다(검색 / 생성 / 가져오기 → 고정된 프로젝트 로컬 경로 + 원장). phases/source/guide.md 참조(media-use resolve를 래핑; 검색 기반 카테고리는 뉴스/웹/트윗/이미지 검색 사용). asset_needs가 비어 있으면 Step 3으로 건너뜁니다.
우아하게 저하: 검색/제공자가 사용 불가능하면 카테고리는 에셋 없음으로 되돌아갑니다(context.log에 기록).
Step 3 — 디자인 (서브에이전트: 디렉터 Part 2)
서브에이전트 디스패치 (프롬프트 = agents/director.md Part 2 + Step 2가 실행된 경우 확인된 assets/index.md를 포함한 디스패치 컨텍스트 + catalog-map.md). 사용 가능한 에셋을 중심으로 샷을 디자인합니다: 카탈로그 블록 + hyperframes-animation 규칙/청사진, 레이아웃, 모션, 비트, 그리고 (asset-fusion의 경우) element_positions + 스포이드 팔레트를 선택합니다. shot-plan.json을 최종 확정합니다(content.block + content.customize + 카테고리별 콘텐츠).
Step 4 — 빌드 (서브에이전트: 빌더, 재사용 우선)
빌더의 디스패치 컨텍스트에 공유 모션 원칙을 포함합니다. charts 및 stat의 경우 데이터 인 모션도 포함합니다. 빌더는 타임라인을 작성하기 전에 이 가이드를 읽습니다.
서브에이전트 디스패치. 프롬프트 = 전체 agents/builder.md + 디스패치 컨텍스트 (shot-plan.json, catalog-map.md, 카테고리의 module.md, references/motion-vocabulary.md, references/builder-contract.md). 재사용 우선: npx hyperframes add <block> + 제자리에서 사용자 지정; 갭 + 에셋 퓨전 어포던스만 수동 작성. HF 계약을 준수하는 compositions/index.html 출력 (일시 중지된 GSAP 타임라인 window.__timelines, class="clip" + 안정적인 ID, tl.seek(0), 결정론적).
Step 5 — 검증 (Bash → 실패 시 수리 서브에이전트)
(cd "$PROJECT_DIR" && npx hyperframes check .)
(cd "$PROJECT_DIR" && npx hyperframes snapshot --at <proof-times>)
시작 상태, 시그니처 동작 및 최종 홀드를 보여주는 증명 시간을 선택하십시오. 계속하기 전에 생성된 연락처 또는 스냅샷 시트를 검사하십시오. lint, check 또는 스냅샷 실패 시, 수리 서브에이전트(agents/finalize.md)를 한 번의 제자리 수정 패스로 디스패치한 다음 실패한 게이트를 다시 실행하십시오. 결함을 숨기기 위해 고정된 기간을 변경하지 마십시오.
Step 6 — 승인 및 렌더링 (Bash)
Studio를 연 다음 한 가지 질문을 합니다: "지금 렌더링할까요, 아니면 변경할까요?" 수정 후 동일한 게이트로 돌아갑니다:
(cd "$PROJECT_DIR" && npx hyperframes preview --background)
명시적인 렌더링 응답 후에만 렌더링:
(cd "$PROJECT_DIR" && npx hyperframes render . --skill=motion-graphics -q high -o ./renders/video.mp4)
# 투명 오버레이 변형: --format webm (또는 mov)
출력이 존재하고, 비어 있지 않으며, 의도된 지속 시간인지 확인하십시오. 최종 핸드오프는 아티팩트 이름, 실제 지속 시간, 구성 또는 프레임 ID, 증명 시간 및 검사된 연락처 또는 스냅샷 시트를 지정합니다. 플래그는 /hyperframes-cli → references/preview-render.md에 있습니다.
재개 테이블
| 상태 | 계속 위치 |
|---|---|
shot-plan.json 없음 | Step 1 (계획) |
shot-plan.json에 asset_needs가 있고, assets/ 없음 | Step 2 (소싱) |
shot-plan.json 최종, compositions/index.html 없음 | Step 3/4 (디자인+빌드) |
compositions/index.html 존재, 증명 스냅샷 없음 | Step 5 (검증) |
| 검사 및 증명 스냅샷 통과, 승인된 렌더링 없음 | Step 6 (승인) |
| 승인된 렌더링 존재 | 출력 확인 후 보고 |
설계 노트 (메인테이너 — 실행은 이것을 읽지 않음)
- **에셋 우선 배급
…
[번역을 위해 잘림]