플러그인 설치: 설정 또는 업데이트 명령 전에, 이 스킬이 HyperFrames 플러그인 내에 있을 경우 플러그인 실행 규칙을 따르세요. 독립 실행형 설치는 아래의 업데이트 지침을 유지합니다.
먼저, 이 스킬을 최신 상태로 유지하세요 — 사용자에게 확인 후 다음 명령어를 실행:
npx hyperframes skills update motion-graphics. 모든 것이 최신 상태이면 빠르게 아무 일도 일어나지 않습니다. 그렇지 않으면, 이 스킬과 이 스킬이 의존하는 핵심 도메인 스킬을 사용하기 전에 새로고침합니다.
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/references/brief-contract.md의 표준 "미리보기 먼저, 아니면 렌더링?" 질문을 합니다. BRIEF.md가 있는 경우, 감독의 질문 전에 그것을 읽으세요.
짧고 디자인 중심적인 모션 그래픽. 자산 우선: 샷을 디자인하기 전에 자산 전략을 결정하고 실제 자료를 소싱한 다음, 가진 것을 중심으로 샷을 디자인하고, 카탈로그 기능을 재사용하여 구성합니다. 모든 아티팩트는 PROJECT_DIR = videos/<project-name>/ (0단계에서 생성)에 저장됩니다; 아래의 모든 경로는 이 디렉토리를 기준으로 합니다.
| 단계 | 실행 | 주요 아티팩트 | 상세 흐름 |
|---|---|---|---|
| init | Bash | hyperframes.json | 0단계 |
| plan | 하위 에이전트 — 검색 결정? + 분류 + 자산 전략 | shot-plan.json (초안: 카테고리, asset_needs 쿼리, 브리프) | agents/director.md (1부) |
| source ◇ | Bash — 미디어 사용 해결 (asset_needs가 비어 있으면 건너뜀) | assets/ + assets/index.md | phases/source/guide.md |
| design | 하위 에이전트 — 해결된 자산 중심 샷 디자인 | shot-plan.json (최종: 블록 + 레이아웃 + 모션 + 위치) | agents/director.md (2부) |
| build | 하위 에이전트 — 재사용 우선 구성 | compositions/index.html | agents/builder.md |
| verify | Bash — lint, check, 증명 스냅샷; 실패 시 수리 | snapshots/contact-sheet.jpg | 5단계 |
| approve | 미리보기 또는 렌더링 질문; 답변 대기 | 명시적 렌더링 승인 | 6단계 |
| render | Bash — hyperframes render (MP4, 또는 오버레이의 경우 --format webm/mov) | renders/video.mp4 또는 투명 오버레이 | 6단계 |
◇ source는 선택한 카테고리가 자산을 선언한 경우에만 실행됩니다. 순수 코드/텍스트 카테고리(예: 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.
선택적 키 (설정되지 않은 경우 로컬 대체) — media-use를 통해 자산을 소싱/생성하는 카테고리에만 필요:
| 키 | 용도 | 대체 |
|---|---|---|
GEMINI_API_KEY / GOOGLE_API_KEY | 이미지 생성 (media-use 해결) | 생성 건너뛰기 / 검색 전용 |
| (asset_scout / 검색 제공자) | webpage/news/tweet + asset-fusion 실제 자산 검색 | 카테고리가 자산 없음으로 저하됨 |
흐름
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를 단독으로 사용하지 마십시오.
1단계 — 계획 (하위 에이전트: 감독 1부)
하위 에이전트 하나를 디스패치합니다. 프롬프트 = 전체 agents/director.md + ## Dispatch context (SKILL_DIR / PROJECT_DIR / 사용자 요청 / Schema: <SKILL_DIR>/references/shot-plan-ir.md). 다음을 수행해야 합니다:
- 결정: 검색이 필요한가? (첫 번째 분기)
- 아니요 → 폼 카테고리 선택 (kinetic-type / stat / charts / logo-reveal / lower-thirds); 콘텐츠는 사용자가 제공;
asset_needs: []. - 예 → 검색 계획을
asset_needs[]로 내보냄 (news / web / tweet / image; 두 극 쿼리). 구체적인 검색 기반 카테고리 (webpage / news / tweet / asset-fusion)는 2단계에서 반환된 콘텐츠 유형에 의해 확인되고, 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.
2단계 — 소스 ◇ (Bash: media-use, 조건부)
shot-plan.json.asset_needs가 비어 있지 않으면, 자산을 해결합니다 (검색 / 생성 / 가져오기 → 고정된 프로젝트 로컬 경로 + 원장). phases/source/guide.md 참조 (media-use resolve를 래핑; 검색 기반 카테고리는 news/web/tweet/image 검색을 사용). asset_needs가 비어 있으면 3단계로 건너뜁니다.
# 설명용 — phases/source/guide.md 참조
(cd "$PROJECT_DIR" && node <SKILL_DIR>/phases/source/resolve.mjs --plan ./shot-plan.json --out ./assets)
적절하게 저하: 검색/제공자를 사용할 수 없는 경우, 카테고리는 자산 없음으로 대체됩니다 (context.log에 기록).
3단계 — 디자인 (하위 에이전트: 감독 2부)
하위 에이전트를 디스패치합니다 (프롬프트 = agents/director.md 2부 + 2단계가 실행된 경우 해결된 assets/index.md를 포함한 디스패치 컨텍스트 + catalog-map.md). 사용 가능한 자산을 중심으로 샷을 디자인합니다: 카탈로그 블록 + hyperframes-animation 규칙/청사진, 레이아웃, 모션, 비트, (asset-fusion의 경우) element_positions + 스포이드 팔레트를 선택합니다. shot-plan.json을 최종 확정합니다 (content.block + content.customize + 카테고리별 콘텐츠).
4단계 — 빌드 (하위 에이전트: 빌더, 재사용 우선)
하위 에이전트를 디스패치합니다. 프롬프트 = 전체 agents/builder.md + 디스패치 컨텍스트 (shot-plan.json, catalog-map.md, 카테고리의 module.md, references/motion-vocabulary.md, references/builder-contract.md). 재사용 우선: npx hyperframes add <block> + 제자리에서 커스터마이징; 간격과 asset-fusion 어포던스만 수동으로 작성합니다. HF 계약을 준수하는 compositions/index.html 출력 (일시 중지된 GSAP 타임라인 window.__timelines, class="clip" + 안정적인 ID, tl.seek(0), 결정론적).
5단계 — 검증 (Bash → 실패 시 수리 하위 에이전트)
(cd "$PROJECT_DIR" && npx hyperframes lint .)
(cd "$PROJECT_DIR" && npx hyperframes check .)
(cd "$PROJECT_DIR" && npx hyperframes snapshot --at <proof-times>)
시작 상태, 시그니처 동작, 최종 유지를 보여주는 증명 시간을 선택합니다. 계속하기 전에 생성된 연락처 시트 또는 스냅샷 시트를 검사합니다. lint, check 또는 스냅샷 실패 시, 한 번의 제자리 수정 패스를 위해 수리 하위 에이전트(agents/finalize.md)를 디스패치한 다음, 실패한 게이트를 다시 실행합니다. 결함을 숨기기 위해 고정된 지속 시간을 변경하지 마십시오.
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 없음 | 1단계 (계획) |
shot-plan.json에 asset_needs 있음, assets/ 없음 | 2단계 (소스) |
shot-plan.json 최종, compositions/index.html 없음 | 3/4단계 (디자인+빌드) |
compositions/index.html 존재, 증명 스냅샷 없음 | 5단계 (검증) |
| 검사 및 증명 스냅샷 통과, 승인된 렌더링 없음 | 6단계 (승인) |
| 승인된 렌더링 존재 | 출력 확인 후 보고 |
디자인 노트 (유지 관리자 — 실행 시 이 부분을 읽지 않음)
- 자산 우선 근거: 소싱은 초기에 수행되며 샷 디자인에 정보를 제공합니다 (RWA 흐름: 분석 → 검색 → 검토 → 카테고리 확정 → 블록 선택 → 커스터마이징). 넓은 검색 쿼리 +
media-use resolve의 수집은 초기 증명을 위해 충분한 자료를 확보합니다. - 영구적 그래픽 레이어: 베이크드 베이스맵을 제외하고, 모든 그래픽은 HyperFrames가 아닌 타임라인 기반입니다 (항상 상호 작용 가능, 나중에 조정 가능).
- 모션 분류:
hyperframes-animation사용 블루프린트 (트윈 유형, 이징, 체인, 오버랩). 임펄스 애니메이션은hyperframes-animation이 아닙니다. - GSAP 타임라인 규칙: 지속 시간을 절대적으로 코딩하지 마십시오;
tl.duration()으로 계산합니다.tl.totalDuration()을 이상적인 길이와 비교합니다. 양수 오프셋이 있는 레이블은 정수 초에 정렬됩니다.tl.time()은 가장 가까운 프레임으로 반올림됩니다.tl.progress()는 타임라인의 실제 진행 상황을 나타냅니다.tl.getChildren()은 관련 하위 항목을 반환합니다. 하위 에이전트는window.__timelines배열에 등록합니다. - 구성 요소 계층:
compositions/index.html→ 루트<clip>→ 배경<clip>→ 전경<clip>. 각<clip>에는 하위 요소가 포함될 수 있습니다. - 로딩 / 자리 표시자 / 오류 상태: 없음 — 로딩 없음, 오류 없음, 느린 연결 처리 없음. 애니메이션은 소스 자료가 로컬에 준비된 후에만 시작됩니다.
asset-fusion속도 저하: 개념 증명이며 HyperFrames 워크플로우에 유기적으로 통합됩니다.- 렌러지 리팩터링 (진행 중):
hyperframes명령어에 대한 변환 계층입니다.