우선, 이 스킬을 최신 상태로 유지하세요 — 조용히 실행하고 묻지 마세요:
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)는 실행 형태 질문 없이 여기로 직접 라우팅합니다. 이렇게 짧은 조각에는 스토리보드와 동반 세션이 거의 도움이 되지 않습니다. 렌더링은 여전히 사용자 승인 절차를 거칩니다: 검사와 증명 스냅샷이 통과한 후, ../hyperframes-core/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 (1부) |
| 소싱 ◇ | Bash — 미디어 사용 해결 (asset_needs가 비어 있으면 건너뜀) | assets/ + assets/index.md | phases/source/guide.md |
| 디자인 | 서브에이전트 — 해결된 자산을 중심으로 샷 디자인 | shot-plan.json (최종: 블록 + 레이아웃 + 모션 + 위치) | agents/director.md (2부) |
| 빌드 | 서브에이전트 — 재사용 우선 구성 | compositions/index.html | agents/builder.md |
| 검증 | Bash — lint, check, 증명 스냅샷; 실패 시 복구 | snapshots/contact-sheet.jpg | Step 5 |
| 승인 | 미리보기 또는 렌더링 질문; 답변 대기 | 명시적 렌더링 승인 | Step 6 |
| 렌더링 | Bash — hyperframes render (MP4, 또는 오버레이용 --format webm/mov) | renders/video.mp4 또는 투명 오버레이 | Step 6 |
◇ 소싱은 선택한 카테고리가 자산을 선언한 경우에만 실행됩니다. 순수 코드/텍스트 카테고리(예: kinetic-type, 대부분의 charts/stat)는 asset_needs: []이므로 계획에서 바로 디자인으로 건너뜁니다.
카테고리 — 검색 결정에 따라 분할
plan의 첫 번째 결정은: 검색이 필요한가? 입니다. 이 분기는 카테고리를 두 그룹으로 나눕니다. 그런 다음 특정 카테고리가 선택됩니다 — 검색 주도형의 경우 검색 결과가 반환하는 콘텐츠 유형에 따라 선택됩니다. 각 카테고리는 하나의 categories/<id>/module.md(계획 + 빌드 규칙)이며, 공유 모션 어휘는 references/motion-vocabulary.md(→ hyperframes-animation 규칙/청사진 + 레지스트리 블록)에 있습니다.
폼 카테고리 — 검색 불필요; 사용자가 콘텐츠를 제공:
| 카테고리 | 의도 | 의존 |
|---|---|---|
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 | 이미지 생성 (미디어 사용 해결) | 생성 건너뛰기 / 검색 전용 |
| (에셋 스카우트 / 검색 제공자) | 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 — 계획 (서브에이전트: 감독 1부)
하나의 서브에이전트를 디스패치합니다. 프롬프트 = 전체 agents/director.md + ## 디스패치 컨텍스트(SKILL_DIR / PROJECT_DIR / 사용자 요청 / Schema: <SKILL_DIR>/references/shot-plan-ir.md). 다음을 수행해야 합니다:
- 결정: 이것에 검색이 필요한가? (첫 번째 분기)
- 아니요 → 폼 카테고리(kinetic-type / stat / charts / logo-reveal / lower-thirds)를 선택합니다. 콘텐츠는 사용자가 제공합니다.
asset_needs: []. - 예 → 검색 계획을
asset_needs[](뉴스 / 웹 / 트윗 / 이미지, 2극 쿼리)로 내보냅니다. 특정 검색 주도형 카테고리(webpage / news / tweet / asset-fusion)는 Step 2에서 반환된 콘텐츠 유형으로 확인되고 Step 3에서 최종 확정됩니다.
- 아니요 → 폼 카테고리(kinetic-type / stat / charts / logo-reveal / lower-thirds)를 선택합니다. 콘텐츠는 사용자가 제공합니다.
shot-plan.json초안을 작성합니다(봉투 + 선택한 폼 카테고리 또는 검색 의도 +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(미디어 사용 해결 래퍼, 검색 주도형 카테고리는 뉴스/웹/트윗/이미지 검색 사용)를 참조하세요. asset_needs가 비어 있으면 Step 3으로 건너뜁니다.
# 설명용 — phases/source/guide.md 참조
(cd "$PROJECT_DIR" && node <SKILL_DIR>/phases/source/resolve.mjs --plan ./shot-plan.json --out ./assets)
우아하게 저하: 검색/제공자를 사용할 수 없으면 카테고리가 자산 없음으로 폴백됩니다(context.log에 기록).
Step 3 — 디자인 (서브에이전트: 감독 2부)
서브에이전트를 디스패치합니다(프롬프트 = agents/director.md 2부 + Step 2가 실행된 경우 해결된 assets/index.md를 포함한 디스패치 컨텍스트 + catalog-map.md). 사용 가능한 자산을 중심으로 샷을 디자인합니다: 카탈로그 블록 + hyperframes-animation 규칙/청사진, 레이아웃, 모션, 비트, (asset-fusion의 경우) element_positions + 스포이드 팔레트를 선택합니다. shot-plan.json(content.block + content.customize + 카테고리별 콘텐츠)을 최종 확정합니다.
Step 4 — 빌드 (서브에이전트: 빌더, 재사용 우선)
서브에이전트를 디스패치합니다. 프롬프트 = 전체 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 lint .)
(cd "$PROJECT_DIR" && npx hyperframes check .)
(cd "$PROJECT_DIR" && npx hyperframes snapshot --at <증명 시간>)
시작 상태, 특징적인 동작, 최종 홀드를 보여주는 증명 시간을 선택하세요. 계속하기 전에 생성된 연락처 시트 또는 스냅샷 시트를 검사하세요. 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 (승인) |
| 승인된 렌더링 존재 | 출력 확인 후 보고 |
디자인 노트 (메인테이너 — 실행 시 이 내용을 읽지 않음)
- 자산 우선 근거: 소싱은 전면에 배치되어 샷 디자인에 정보를 제공합니다(RWA 흐름: 분석 → 검색 → 검토 → 구성). 검색 주도형 카테고리(
webpage/news/tweet)와asset-fusion은 모두 미디어 사용 검색(뉴스/웹/트윗/이미지)에 의존하며, 이는 미디어 사용의 문서화된 RWA 계보입니다. - 재사용 우선: LLM 생성 템플릿의 생태계 내 유사체
...
[번역됨, 계속]