Communitygithub.com

heygen-com/hyperframes

텍스트(기사, 노트, 주제, 요약)를 faceless 설명 동영상으로 변환합니다. 사이트나 실제 영상을 캡처할 필요 없이, 장면마다 타이포그래피, 추상 그래픽, 다이어그램, 데이터 시각화 등을 자동으로 생성합니다. 주제 설명, 개념 분석, 사용 방법, 리스트형 콘텐츠에 적합합니다.

hyperframes란 무엇인가요?

이 스킬은 임의의 텍스트를 faceless 설명 동영상으로 제작하는 완전 자동화 워크플로우입니다. 'HyperFrames' 프레임워크 위에서 동작하며, 6단계(설정 → 브리핑 → 디자인 시스템 → 스토리보드/스크립트 → 오디오 → 비주얼 디자인 → 프레임 제작 → 최종 렌더링)로 구성됩니다. 사용자가 제공한 텍스트를 분석하여 스토리보드와 대본을 생성하고, 사전 제작된 프레임 프리셋에서 적절한 디자인을 선택하여 각 장면에 시각적 방향을 추가합니다. 모든 시각 요소는 타이포그래피, 추상 그래픽, 다이어그램, 차트 등을 통해 장면별로 새롭게 창작되며, 실제 자산을 캡처하거나 가져올 필요가 없습니다. HeyGen의 음성/음악 라이브러리와 같은 외부 API를 활용하여 내레이션, 배경 음악, 단어 타이밍을 자동 생성하며, 최종 결과물은 MP4 동영상 파일로 내보내집니다. 협업 모드와 자율 모드를 모두 지원하며, 각 단계의 게이트를 통과해야 진행됩니다. 개념 설명, 튜토리얼, 리스트형 콘텐츠, 이론 분석 등에 적합하며, 제품 홍보나 웹사이트 투어에는 사용되지 않습니다.

지원 대상~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/heygen-com/hyperframes/tree/main/skills/faceless-explainer

즐겨 사용하는 AI에게 물어보기

이 에이전트 스킬이 미리 로드된 새 채팅을 엽니다.

문서

플러그인 설치: 설정 또는 최신화 명령 전에 이 스킬이 HyperFrames 플러그인 내에 있을 경우 플러그인 실행 규칙을 따르십시오. 독립 실행형 설치의 경우 아래 업데이트 지침을 유지합니다.

먼저, 이 스킬을 최신 상태로 유지하십시오 — 사용자에게 확인 후 실행: npx hyperframes skills update faceless-explainer. 모든 것이 최신 상태면 빠른 no-op입니다. 그렇지 않으면 이 스킬과 이에 의존하는 핵심 도메인 스킬을 사용하기 전에 새로고침합니다.

media-use: 오디오/이미지/로고를 소싱하기 전에 /media-use를 호출하여 HeyGen 카탈로그에서 BGM/SFX/이미지를, 공식 소스에서 브랜드 로고를 가져옵니다. 기존 자산을 등록하려면 먼저 --adopt를 실행하십시오. /media-use 스킬을 참조하십시오.

Faceless 설명 동영상 → HyperFrames

이 스킬을 사용하여 텍스트 본문을 설명 동영상으로 변환하십시오: 디자인 시스템을 선택하고, 교육적 스토리를 계획하며, HyperFrames에서 프레임별로 구축합니다. Faceless는 모든 시각 요소가 다운스트림에서 새롭게 창작된다는 의미입니다 — 캡처 단계나 실제 자산 인벤토리가 없습니다.

정문은 /hyperframes입니다. 당신은 오케스트레이터입니다. 각 단계를 실행하고, 게이트를 확인한 후에만 계속 진행하십시오. 이 스킬은 텍스트에서 주제를 설명하는 용도이며, 제품이나 캡처할 웹사이트가 없습니다. 다른 의도, 단순한 "동영상 만들기", 또는 불확실한 경우 → 먼저 /hyperframes를 읽으십시오 — 의도 레이어가 모든 경로 결정을 소유하며, BRIEF.md 없이 여기에 도착한 새로운 생성 요청은 어차피 그 레이어를 거칩니다(설정의 시작 규칙).

당신은 오케스트레이터입니다. videos/<project>/ 디렉토리에서 작업하십시오. 순서대로 단계를 실행하고 각 게이트를 통과한 후 계속 진행하십시오. 사용자 게이트 단계는 0단계, 3단계, 6단계입니다. 0단계 전에 ../hyperframes/references/brief-contract.md를 읽으십시오 — 게이트 유형과 BRIEF.md의 flow/storyboard가 3/4/6단계 게이트를 관장하는 모드를 어떻게 파생하는지 정의합니다. 5단계(프레임별로 하위 에이전트 하나를 파견)를 제외한 모든 단계를 직접 수행하십시오. 디자인이나 모션 규칙을 여기에 넣지 마십시오. 해당 규칙은 프레임 워커 하위 에이전트, 이 스킬의 로컬 ../hyperframes-animation/rules/ + ../hyperframes-animation/blueprints/, 그리고 hyperframes-creative에 있습니다.

워크플로우: 0단계 설정 → hyperframes.json; 1단계 브리핑 → capture/extracted/; 2단계 디자인 시스템 → frame.md; 3단계 스토리보드/스크립트 → STORYBOARD.md 및 SCRIPT.md; 3.1단계 오디오 → audio_meta.json; 4단계 비주얼 디자인 → 보강된 STORYBOARD.md; 5단계 프레임 → compositions/frames/NN-*.html 및 index.html; 6단계 최종 렌더링 → renders/video.mp4.


0단계: 설정

목표: 확정된 브리핑과 함께 시작하고, HyperFrames 프로젝트를 생성하며, 브리핑을 영구적으로 만듭니다.

브리핑은 의도 레이어에 의해 확정되며, 여기서 질문하지 않습니다. 시작 규칙, 순서대로: (1) BRIEF.md가 존재함 → 읽고 아무것도 묻지 않음 — 브리핑은 확정되었으며, 그 flow/storyboard가 모드를 파생합니다(브리핑 계약 § 1). (2) BRIEF.md는 없지만 프로젝트가 존재함(hyperframes.json / STORYBOARD.md가 디스크에 있음) → 스토리보드의 머리말과 기록된 선호도에서 재개합니다. 절반만 구축된 프로젝트를 다시 조사하지 마십시오. (3) 둘 다 없음 — 여기에 직접 도착한 새 생성 요청 → /hyperframes를 읽고 그 의도 레이어(references/intent-interview.md)를 실행합니다: 레시피와 기억된 기본값을 확인하고, 이 경로의 질문(../hyperframes/references/routes/faceless-explainer.md)을 수행하며, 잠긴 브리핑을 반환합니다. 편집 요청은 이 모든 것을 건너뜁니다 — 편집을 진행하십시오.

hyperframes.json이 없을 때만 초기화합니다. <project> 이름은 주제에서 케밥 표기법(예: compound-interest-explained)으로 지정하며, 워크스페이스 이름이나 타임스탬프를 사용하지 마십시오.

npx hyperframes init "videos/<project>" --non-interactive --example=blank --skill=faceless-explainer — init은 설치된 스킬을 GitHub의 최신 버전과 비교하여 오래된 것이 있으면 전역 세트를 업데이트합니다.

초기화 후, <PROJECT_ROOT>를 videos/<project>로 설정하고 이후 모든 상대 경로 명령을 해당 디렉토리를 작업 디렉토리로 사용하여 실행하십시오. 아래 명령에서 .는 <PROJECT_ROOT>를 의미합니다. 호출자 디렉토리에 .media, capture 또는 출력 파일을 절대 쓰지 마십시오.

초기화 직후 BRIEF.md를 작성하십시오(절대 그 전에 작성하지 마십시오 — init은 비어 있지 않은 디렉토리를 거부합니다): 의도 레이어의 잠긴 브리핑, 형태는 ../hyperframes/references/brief-format.md를 따름. <MEDIA_DIR>을 설치된 /media-use 스킬 디렉토리로 확인하십시오. 그런 다음 각 선호도 기반 답변을 node <MEDIA_DIR>/scripts/prefs.mjs record --hyperframes .로 기록하십시오(brief-format.md가 하위 집합을 명명합니다). 의도 레이어가 레시피를 채택한 경우, node <MEDIA_DIR>/scripts/recipe.mjs use --hyperframes . --name <name>을 실행하십시오. 그러면 frame.md를 프로젝트로 복사하고(2단계는 건너뜀) 3단계 초안을 작성할 골격을 반환합니다. 레시피는 답변을 채우지만 승인을 채우지는 않습니다. 검토 게이트는 여전히 실행됩니다.

설정을 통과하기 전에 로그인 상태를 표시하십시오 — npx hyperframes auth status를 실행하고 그 출력을 그대로 전달하십시오. 음성/BGM이 HeyGen 또는 로컬 엔진을 사용할지, 로그아웃 상태일 때 로그인 방법을 보고합니다. 한 가지 분기를 적용하십시오:

  • 협업: 사용자가 로그인하거나 명시적으로 offline / go를 선택할 때까지 기다립니다.
  • 자율: 상태를 알리고 사용 가능한 로컬 엔진을 통해 계속 진행합니다.

오프라인 제공자가 없을 때 필요한 기능을 조용히 생략하지 마십시오. 장애물을 표면화하십시오. 이 결정을 다른 질문에 통합하거나 저장소별 .env에 키를 쓰지 마십시오. 인증 소유권 및 오프라인 폴백: /media-use references/setup-providers.md § 제공자.

게이트: hyperframes.json과 BRIEF.md가 존재함; 선호도 기반 답변이 기록됨(브리핑 계약 § 2); 로그인 상태가 표시됨(로그인했거나 오프라인으로 계속 진행 중).


1단계: 브리핑(캡처 없음)

목표: 사용자의 텍스트를 정보 출처로 프로젝트에 통합합니다. 웹사이트 캡처나 실제 자산이 없습니다 — 이것은 faceless 설명 동영상입니다.

사용자의 전체 입력을 그대로 저장한 다음, 수동으로 합성 캡처 패키지를 생성하십시오:

  • capture/extracted/visible-text.txt — 전체 기사 / 노트 / 주제 / 요약, 그대로. 이것은 정보의 출처이며, 스토리 템플릿이 아닙니다(3단계가 재구성합니다).
  • capture/extracted/tokens.json — { "title": "", "description": "", "colors": [], "fonts": [] }. title/description을 브리핑에서 채웁니다. 사용자가 명시적으로 브랜드 색상이나 글꼴을 제공하지 않는 한 colors/fonts는 비워둡니다(디자인 프리셋이 어쨌든 완전한 팔레트를 제공합니다).

사용자가 스크립트를 붙여넣거나 자신의 문구를 유지하기를 원하는 경우, 그대로 user_script.txt로 저장하십시오. VO_MODE(그대로 또는 재구성)는 BRIEF.md에서 가져옵니다 — 의도 레이어가 스크립트가 도착할 때 질문합니다. 브리핑에 어떻게든 누락된 경우에만 여기서 한 번 질문하고, 답변을 3단계를 위해 저장하십시오.

npx hyperframes capture를 실행하지 마십시오(URL이 없습니다). asset-descriptions.md를 생성하거나 capture/assets/를 채우지 마십시오 — faceless 시각 요소는 4-5단계에서 창작되며, 캡처되지 않습니다. 유일한 예외: 사용자가 실제 이미지를 제공한 경우, public/<basename> 아래에 배치하고 3단계를 위해 기록하십시오.

게이트: capture/extracted/visible-text.txt와 capture/extracted/tokens.json이 존재함; 설명 동영상의 주제와 대상을 한 문장으로 명확히 말할 수 있습니다.


2단계: 디자인 시스템

목표: 제공된 프레임 프리셋 중 하나를 선택합니다. 스크립트가 이 프리셋을 이 동영상의 frame.md + 캡션 스킨으로 변환합니다.

BRIEF.md가 style_preset을 명명한 경우 — 사용자가 의도 레이어에서 쇼케이스를 보고 시각적으로 선택한 것입니다 — 그것을 사용하십시오. 판단 호출은 브리핑이 침묵할 때만 당신이 합니다. 그런 다음 한 가지 결정을 내립니다 — 어떤 프리셋: ../hyperframes-creative/references/design-spec.md를 읽고 ../hyperframes-creative/frame-presets/를 탐색하십시오. 주제, 톤, 대상에 가장 잘 맞는 프리셋을 선택하십시오. 그런 다음 실행하십시오:

node <SKILL_DIR>/scripts/build-frame.mjs --preset <name> --hyperframes .

스크립트는 나머지를 결정론적으로 수행합니다: 프리셋의 FRAME.md를 frame.md로 복사하고 capture/extracted/tokens.json의 브랜드 토큰 위에 리믹스합니다(브랜드 색상을 역할별로 프리셋의 색상 키에 매핑; 프리셋의 표시 + 본문 글꼴을 브랜드의 것으로 교체), 프리셋의 캡션 스킨을 .hyperframes/caption-skin.html로 복사하고, 자체 검증합니다(잘못된 매핑 시 1로 종료). 종료 코드 0이면 바로 진행하십시오 — 사양을 수동 편집하지 마십시오.

faceless 설명 동영상은 일반적으로 브랜드 색상/글꼴이 없습니다(tokens.json colors/fonts 비어 있음) → 스크립트는 프리셋 자체의 팔레트, 완전한 배송 가능 디자인을 유지합니다. 사용자가 브랜드 색상/글꼴을 명명한 경우에만 실행 전에 tokens.json에 추가하고, 매핑이 정말로 필요할 때만 수동으로 frame.md를 조정하십시오.

게이트: build-frame.mjs가 0으로 종료됨 — frame.md가 명명된 프리셋에서 존재하며, (프리셋이 제공하는 경우) .hyperframes/caption-skin.html이 캡션 스킨 소스로 존재함; 선택한 프리셋이 선호도로 기록됨(--key style_preset --workflow <this workflow>, 브리핑 계약 § 2).


3단계: 스토리보드 및 스크립트

목표: 텍스트를 승인된 프레임별 교육 계획으로 변환합니다.

../hyperframes-creative/references/story-spine.md(훅 언어, 증거 전 가치, 제안으로서의 스토리보드, 소스 추적 가능한 시각 요소), references/story-design.md, ../hyperframes-animation/blueprints-index.md, ../hyperframes/references/storyboard-format.md, ../hyperframes/references/script-format.md를 읽으십시오. 이들을 사용하여 STORYBOARD.md와, 내레이션이 필요할 때 SCRIPT.md를 작성하십시오. 머리말 duration:을 브리핑의 length에서 설정하십시오 — 대략적인 예상치입니다. 어셈블리는 컷이 그 예상치에 대해 어디에 위치하는지 보고합니다.

설명 동영상 구조(개념 / 방법 / 리스트 / 스토리), 훅 전략, 명확성 기법, 감정적 비트, 유형-열거형 매핑, 그리고 VO_MODE에 story-design.md를 사용하십시오. 동영상의 순서는 내러티브 디자인에서 오며, 입력 텍스트의 단락 순서가 아닙니다 — 재정렬, 병합, 생략, 압축하십시오. 소프트 가이드로서, ../hyperframes-animation/blueprints-index.md의 역할→청사진 메뉴를 참조하십시오: 각 비트에 대해, 해당 후보 청사진이 암시하는 형태로 음성 해설을 작성하고, 적합할 때 그 후보 blueprint: ID를 태그하십시오. 교수적 진실이 여전히 어떤 비트가 존재할지 결정합니다 — 청사진에 맞추기 위해 비트를 강제하지 말고, 입증된 형태가 가능하다고 해서 비트를 발명하지 마십시오. Faceless 시각 요소는 다운스트림에서 창작되므로 프레임은 자산 인벤토리를 전달하지 않습니다: 사용자가 실제 public/<basename> 이미지를 제공하지 않는 한 asset_candidates는 비워두십시오. 스토리보드 및 스크립트 참조의 정확한 필수 필드를 사용하십시오.

초안 작성 후, 검토 루프의 계획 패스를 실행하십시오 — ../hyperframes/references/review-loop.md § 1: 계획을 제안으로 제시하고, 두 가지 질문을 하십시오 — 승인 또는 변경, 그리고 스케치 먼저(권장) 또는 건너뛰기. 피드백은 채팅 응답으로 도착합니다. 승인될 때까지 반복하십시오. 이것은 체크포인트 게이트입니다(브리핑 계약 § 1): 자율 모드에서는 질문할 것이 없습니다 — 동일한 요약을 헤드업으로 게시하고 진행하십시오. 스케치는 빌드에 통합되며, 하나의 미리보기 질문은 6단계에서 나옵니다.

게이트: STORYBOARD.md가 존재하고, 모든 프레임에 필수 내러티브 필드가 있으며, 내레이션이 필요할 때 SCRIPT.md가 존재하고, 사용자가 프레임별 계획을 승인함(자율: 요약이 헤드업으로 게시됨).


3.1단계: 오디오

목표: 승인된 스크립트에서 내레이션, 단어 타이밍, 음악, 오디오 메타데이터를 생성합니다.

3단계 승인 후 오디오를 시작하십시오. 백그라운드에서 실행한 다음 4단계로 계속 진행하십시오.(로그인 상태는 0단계에서 이미 표시되었습니다. 엔진은 자동으로 폴백합니다.)

호출 전에 사용자의 요청에서 내레이션 음성을 선택하십시오. 요청이 음성, 성별, 또는 톤을 명명한 경우, 일치하는 음성 ID를 선택하고 --voice <id>와 함께 전달하십시오. 파이프라인 기본값은 그렇지 않으면 HeyGen에서는 Marcia(여성) / Kokoro에서는 am_michael입니다 — 따라서 "남성 음성"과 같은 요청은 플래그를 전달하지 않으면 조용히 무시됩니다. 음성 ID는 제공자별로 다릅니다. 0단계의 로그인 상태가 선택한 제공자에 따라 확인하십시오: HeyGen(로그인됨)은 node <MEDIA_DIR>/audio/scripts/heygen-tts.mjs --list(또는 GET /v3/voices?engine=starfish)를 통해; Kokoro(오프라인)은 <MEDIA_DIR>/audio/references/tts.md의 음성 테이블(접두사 am_/bm_ 남성, af_/bf_ 여성)을 통해. 사용자가 선호도를 표현하지 않은 경우, 파이프라인 기본값보다 먼저 기억된 음성(브리핑 계약 § 2)으로 폴백하고, 사용한 음성을 말하십시오. --voice는 둘 다 명명하지 않은 경우에만 생략하십시오. 사용자가 이 실행에서 명시적으로 음성을 선택한 경우, 기록하십시오(prefs.mjs record --key voice).

node <SKILL_DIR>/scripts/audio.mjs --script ./SCRIPT.md --storyboard ./STORYBOARD.md --hyperframes . --out ./audio_meta.json --voice <voice-id> &

오디오 스크립트는 내레이션, 단어 타이밍, HeyGen 음악 라이브러리에서 BGM 조회, 타이밍 메타데이터를 처리합니다. BGM 분위기는 스토리보드의 music: 필드에서 가져옵니다. 이것은 생성을 위한 것이 아니라 검색을 위해 HeyGen Audio API를 사용하며, TTS와 동일한 ~/.heygen 자격 증명을 사용합니다. 제공자 세부 정보는 ../media-use/audio/references/tts.md를 읽으십시오.

내레이션이 없고 SCRIPT.md가 없으면 음성 생성을 건너뛰십시오. 스토리보드에 음악 분위기가 있으면 BGM은 여전히 실행될 수 있습니다.

정식 완전 무음 마커(이 오디오 모델을 재사용하는 워크플로우 간에 공유됨): STORYBOARD.md 최상위 YAML 블록에 music: none 그리고 SCRIPT.md 없음. 그 조합은 프로젝트를 무음으로 표시합니다 — 내레이션 없음, BGM 없음, SFX 없음. audio.mjs는 이를 인식하고 아무것도 생성하지 않습니다(오래된 audio_meta.json을 제거합니다. audio_meta.json이 없으면 어셈블리가 무음으로 처리합니다), 따라서 이 단계는 깔끔하게 건너뜁니다. 내레이션이 있는 music: none은 TTS를 유지하고 BGM만 끕니다. 이 정확한 철자를 사용하십시오 — 다른 마커를 즉흥적으로 만들지 마십시오.

게이트: 오디오 작업이 시작되었거나, 프로젝트가 무음으로 표시됨(music: none + SCRIPT.md 없음).


4단계: 프레임 비주얼 디자인

목표: 각 스토리보드 프레임에 시각적 방향, 레이아웃 의도, 모션 선택을 추가합니다.

먼저 스토리보드 시트를 스케치하십시오(협업 모드). 스케치가 없으면 3단계 검토에서 스케치를 건너뛰기로 선택했음을 의미합니다 — 이 경우 계획 패스 없음. references/story-design.md의 시각 전략이 모든 의사 결정을 주도합니다. 사용자가 "스케치 먼저"를 선택한 경우 시작점으로 ../hyperframes-animation/references/blueprint-index.md를 사용하십시오. 각 프레임에 대해, 가장 관련성 높은 청사진 템플릿에서 시작하여 3단계가 프레임의 blueprint: 태그를 채웠다면 해당 청사진을 사용하십시오. 태그가 없으면, 프레임의 콘텐츠와 역할(도입, 개념, 예, 전환, 결론)에 가장 잘 맞는 청사진을 선택하십시오.

협업: 각 프레임에 대해 선택한 청사진과 당신의 해석을 제시하십시오. "설명자가 왼쪽에, 다이어그램이 오른쪽에"와 같은 구체적인 시각적 방향을 포함하십시오. 각 프레임에 대해 한 번씩 피드백을 요청하고 계속 진행하기 전에 승인을 받으십시오.

자율: 각 프레임에 시각적 방향을 적용하고 references/story-design.md 및 references/blueprint-index.md의 규칙을 따라 검증을 실행하십시오.

스케치를 HTML로 변환할 때(../hyperframes-animation/blueprints/에서 처리하는 방법에 따라 필요에 따라) 각 스케치 시트를 결정론적 처리 파이프라인에 맞는 형식으로 저장하십시오. node ../hyperframes-animation/scripts/build-sketches.mjs(있는 경우)가 처리합니다.

게이트: 모든 스토리보드 프레임에 시각적 방향이 있고(협업에서 승인됨, 자율에서 검증됨), 스케치 시트 HTML이 저장됨.


5단계: 프레임 조립

목표: 각 스토리보드 프레임을 완전한 HTML 프레임으로 조립하고, 인덱스 페이지를 생성합니다.

이 단계에서는 각 프레임에 대해 하나의 하위 에이전트를 파견합니다. 중앙 오케스트레이터로서 다음을 수행하십시오:

  1. 각 프레임에 대한 프레임 작업 하위 에이전트를 파견합니다. ../hyperframes-animation/의 프레임 워커 지침을 사용하십시오.
  2. 하위 에이전트는 프레임의 스토리보드 항목, frame.md 디자인 사양, frame.md의 caption-skin HTML을 사용하여 compositions/frames/NN-*.html을 생성합니다.
  3. 하위 에이전트는 ../hyperframes-animation/에서 사용 가능한 청사진 프레임 템플릿 또는 각 프레임의 구성 기능을 사용합니다.
  4. 인덱스 페이지는 모든 프레임과 함께 자동으로 조립됩니다(compositions/index.html).

../hyperframes-animation/blueprints/rules/ 및 ../hyperframes-animation/blueprints/의 정확한 지침을 따르십시오.

게이트: compositions/frames/에 모든 프레임이 있고, compositions/index.html이 존재함.


6단계: 최종 렌더링

목표: 조립된 프레임, 오디오(완료된 경우), 캡션 스킨을 사용하여 최종 동영상 파일을 생성합니다.

node <SKILL_DIR>/scripts/assemble.mjs --hyperframes . --out ./renders/video.mp4

어셈블리는 다음을 수행합니다:

  • 프레임을 시간순으로 정렬
  • compositions/index.html에 프레임을 임베드
  • 렌더링 타이밍에 audio_meta.json 적용(해당하는 경우)
  • 캡션 추가(있는 경우)
  • renders/video.mp4로 출력

협업 게이트: 최종 동영상을 사용자에게 제시하고 승인 또는 재렌더링 요청을 기다리십시오. 거절 시: 피드백을 받아들이고 해당 단계로 돌아가서 수정한 다음 어셈블리를 다시 실행하십시오.

자율 게이트: 동영상을 게시하고 작업을 완료된 것으로 표시하십시오.

게이트: renders/video.mp4가 존재하고, 승인됨(협업) 또는 게시됨(자율).


추가 정보

  • 지원 플랫폼: 이 스킬은 HyperFrames 플랫폼과 함께 작동하며, HeyGen 음성/오디오 API와 통합됩니다.
  • 의존성: 이 스킬은 다른 스킬에 의존합니다: /media-use(오디오/이미지 제공), hyperframes-creative(디자인 시스템), hyperframes-animation(프레임 작업).
  • 워크플로우: 이 스킬은 오케스트레이션 워크플로우의 일부이며, 모든 생성 요청에 대해 /hyperframes가 진입점 역할을 합니다.
  • 참조: 브리핑 형식, 게이트 유형, 스토리보드 형식, 스크립트 형식, 검토 루프 지침은 hyperframes/references/에 있습니다.

Individual skills in this repo

This repo contains 20 individual skills — each has its own dedicated page.

general-video

>

heygen-com/animejs

Anime.js adapter patterns for HyperFrames. Use when writing Anime.js animations or timelines inside HyperFrames compositions, registering animations on window.__hfAnime, making Anime.js seek-driven and deterministic, or translating Anime.js examples into render-safe HyperFrames HTML.

heygen-com/claude-design-hyperframes

Use when running inside Claude Design specifically. Produces a valid, brand-accurate HyperFrames video draft using pre-valid skeletons. For Claude Code / Cursor / Codex, use the `hyperframes` skill instead.

heygen-com/contribute-catalog

Author a new HyperFrames registry block (caption style, VFX block, transition, lower third) or component (text effect, overlay, snippet) and ship it as an upstream PR to the hyperframes repo. Use ONLY when the user wants to CONTRIBUTE to the public catalog — for in-project caption/transition authoring use the `hyperframes` skill, for installing existing registry items use the `hyperframes-registry` skill.

heygen-com/css-animations

CSS animation adapter patterns for HyperFrames. Use when authoring CSS keyframes, animation-delay based timing, animation-fill-mode, animation-play-state, or CSS-only motion that HyperFrames must seek deterministically during preview and rendering.

heygen-com/gsap

GSAP animation reference for HyperFrames. Covers gsap.to(), from(), fromTo(), easing, stagger, defaults, timelines (gsap.timeline(), position parameter, labels, nesting, playback), and performance (transforms, will-change, quickTo). Use when writing GSAP animations in HyperFrames compositions.

heygen-com/hyperframes

Leaves sweep through the frame and part to reveal the headline. HyperFrames block, 1920×1080, 12s, 11 variables.

heygen-com/hyperframes

Render-correctness doctrine for scene-to-scene seams in HyperFrames launch videos — the prerequisites that make transitions composite correctly on the master timeline. Load when assembling the master timeline / index.html, when a white flash appears at a cut or crossfade seam (especially on dark films), when reasoning about why a transition opacity dip shows through, or when verifying the render-side mechanics of how overlapping scene wrappers blend. Covers the opaque stage-ground (#root background) white-flash guard and how the injector overlaps wrappers, holds final frames, ping-pongs tracks, and stamps lint-clean template code onto the master timeline. Does NOT contain the per-transition catalog — see the transition registry for individual transition entries.

heygen-com/hyperframes

The technique catalog: five velocity-matched SEAMS (zoom-through, INVERSE zoom-through, cut-the-curve, waterfall cut, rack-focus blur-cut) plus the two in-scene techniques — waterfall ENTRY (staggered arrival cascades for title cards / segment openers) and the nudge curve (slow-fast-slow three-phase group slides). Covers partial-travel (~12% of frame) velocity matching via mirrored power4 eases, the Z scale-sign rule, size-scaled blur (10px text / 18-20px full-frame), word-by-word staggered cuts, cascade pacing by element weight, and the 10/65/25 slide ratio. Read before authoring any transition, text-beat handoff, kinetic text entry, or group reposition. [depth, zoom, inverse-zoom, scale-sign, mirrored-zoom, rack-focus, pacing, velocity, cut-the-curve, waterfall, stagger, cascade, kinetic-text, title-card, segment-opener, nudge, slide, easing, group-motion, z-depth, motion-graphics, cinematic, transition, blur, directional-continuity]

heygen-com/hyperframes

Glass shards fly in through fog and tile themselves into the headline. HyperFrames block, 1920×1080, 12.16s, 19 variables.

heygen-com/hyperframes

A single feature card orbits a dot sphere on approved Blender camera motion. HyperFrames block, 1920×1080, 10s, 4 variables.

heygen-com/hyperframes

A wireframe portal bursts open, the title comes through, then its letters swap into a second phrase. HyperFrames block, 1920×1080, 8s, 9 variables.

heygen-com/hyperframes

An orbiting camera follows an ice logo as it breaks apart, reforms into two text moments, and fades. HyperFrames block, 1920×1080, 22.5s, 216 variables.

heygen-com/hyperframes

House-style oversized macOS cursor technique for HyperFrames launch videos. Load whenever a scene involves cursors or a pointer-led action, when kicking off a UI scene, when igniting a morph/transition/typing run with a click, or when a scene reads as static, dead, or stale and needs a cheap high-yield source of motion to carry the viewer's eye and segment them out of the stale state. Covers cursor size/look (incl. brand-motif cursors), the off-screen entry law, tip-targeting and the click tap, click-ignites-the-next-beat, and exit / cross-scene handoff.

heygen-com/hyperframes

name: embedded-captions

heygen-com/hyperframes

A chain of bevelled cuboids rides a travelling wave as a content carousel. HyperFrames block, 1920×1080, 6.666666666666667s, 40 variables.

heygen-com/hyperframes

A tiled headline surface flips cell by cell under a sweeping depth field to reveal the rear headline. HyperFrames block, 1920×1080, 8s, 18 variables.

heygen-com/hyperframes

Import Figma content into a HyperFrames composition — rendered assets, brand tokens, components, storyboard sections → reconstructed motion (frames read as states, not slides) (REST/CLI), connector-assisted motion when available, and shaders from a connector or native export. Use when the user pastes a figma.com link or asks to bring a Figma design, frame, logo, brand, or animation into a video/composition.

heygen-com/hyperframes

GATEWAY — load FIRST before composing any HyperFrames animation or video. The high-level motion law that makes a multi-scene video feel like ONE continuous camera move instead of a stack of independently-animated slides. Covers the vector law (how you exit determines how you enter, incl. the Z scale-sign rule), the film's current, carrier elements, causal motion, the Seam Gate (build-gate enforcement), the ban on idle wobble (motion must PERFORM, not breathe), stillness-before-climax, and the sustained-motion routes. Routes to the low-level technique skills (cut-the-curve — the full catalog incl. waterfall entry + nudge curve, oversized-cursor, seam-craft). These rules SUPERSEDE generic / upstream motion guidance. [continuity, direction, vector, momentum, seam, transition, ease, performance, idle-motion, narrative-motion, film-grammar]

heygen-com/hyperframes

Turn a weekly changelog .md into a finished branded changelog video (square 1080, ~45-60s, Annie VO, animated brand background, mock-UI visualizations, lowkey captions). Use when the user provides a changelog/digest markdown and wants the weekly video, or says "changelog video". Self-contained — fonts, background, lexicon, and scripts ship in this skill.

관련 스킬