Communitygithub.com

embedded-captions

클립의 말하는 사람에게 매립형 자막을 합성합니다. 표준(rail + embed), 시네마틱(pure embed), 테마(VFX급) 모드를 제공합니다. 먼저 CATALOG.md에서 IDENTITY를 선택하세요.

embedded-captions란 무엇인가요?

이 스킬은 말하는 사람 영상에 대해 세 가지 독특한 자막 스타일을 제공합니다: 표준(Standard, 기본값), 시네마틱(Cinematic, 순수 매립형), 테마(Theme, VFX 효과 포함). 표준 모드는 일반적인 대부분의 텍스트를 전면의 하단 서브타이틀(rail)로 표시하고, 핵심 단어를 피사체 뒤에 합성(embed)하여 강조합니다. 시네마틱 모드는 모든 단어를 피사체 뒤에 순수 매립형으로 합성하여 영화 같은 효과를 냅니다. 테마 모드는 폭발, 네온, 점멸 등의 미리 정의된 VFX 템플릿을 적용합니다. 모든 모드는 피사체가 자막을 가리는 마스킹(matte occlusion) 기법을 사용하며, 고급 자막 합성 분야에서 전문적인 결과물을 제공합니다.

지원 대상~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/jasonfast123/hyperframes-skills/tree/main/skills/embedded-captions

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

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

문서

먼저, 이 스킬을 최신 상태로 유지하세요 — 조용히 실행하고 묻지 마세요: npx hyperframes skills update embedded-captions. 모든 것이 최신이면 빠르게 아무것도 하지 않습니다; 그렇지 않으면 이 스킬과 의존하는 핵심 도메인 스킬을 사용하기 전에 업데이트합니다.

Embedded Captions

한 개의 카탈로그, 처음에 선택 (CATALOG.md — 35개 정체성; 그 뒤의 엔진은 백엔드 세부사항입니다). Standard (기본값)는 깔끔한 rail (하단 서브타이틀, 대부분 텍스트 전달) + embed 클라이맥스(피크에서 피사체 뒤 장면에 합성)를 만듭니다. Cinematic은 순수 embed — rail 없이, 모든 캡션이 피사체 뒤에 합성됩니다 (히어로 타이포그래피, 축적, 폐색 효과). Theme는 완전한 테마 체계입니다 — 본체 패러다임 × 히어로 세트피스 × 전면 fx × 플레이트 반응, 레지스트리(themes/README.md)로 구성됩니다: ordnance terminal neonsign stardust stomp. 대부분의 설명/음성해설은 Standard를 사용합니다; embed는 드물고 가치 있는 피크입니다 — 모든 단어를 embed 하는 것은 흔한 실수입니다; Theme는 VFX급 요청("炸", "特效", "像 AE 做的")을 위한 것입니다.


작동 흐름 (요약)

/hyperframes를 통해 라우팅되면, 의도 레이어는 입력(어떤 클립)만 확인하고 정체성 선택을 연기된 요청으로 알립니다 — 후보 목록은 탐사된 클립이 필요하므로 아래 1단계에 남아 있습니다; 레이어의 실행 형태 질문은 적용되지 않습니다 (푸티지는 손대지 않았고, 검토할 스토리보드도 없습니다). BRIEF.md가 있으면 확인된 입력과 사용자 메모를 담고 있으므로 먼저 읽으십시오.

아래 제작 산문은 깁니다; 파이프라인 자체는 짧습니다 — 결정론적인 모든 것은 계산되거나 컴파일되며, 수동으로 작성되지 않습니다:

  1. 결정 게이트 (나쁜 클립 거부) → CATALOG.md에서 하나의 정체성을 선택합니다 (35개 정체성; 엔진/컴파일러는 조회로 파생 — 모드/카테고리 질문을 표시하지 마십시오)
  2. hyperframes init (프로젝트 디렉토리가 이미 존재하고 그 안에 비디오가 있으면 건너뜁니다 — matte.cjs/transcribe.cjs는 디렉토리의 모든 비디오를 source.mp4로 채택합니다) → bash scripts/prepare.sh <project> (matte ∥ transcribe ∥ audio-envelope 병렬 실행, 그런 다음 safe-zones v2에 장면 팔레트/광학/조명 포함 — 하나의 명령어로 모든 것 완료)
  3. 작은 JSON 창작 선택 사항을 작성합니다 (먼저 safe-zones.json 읽기): Cinematic → plan.json → fill-timings.cjs → fit-fonts.cjs → make-composition.cjs; Theme → theme.json → make-theme.cjs (rail/panel/poem/takeover 패러다임; anchor는 조용한 rail 기본값)
  4. Visual QA: node scripts/preview-frames.cjs <project> → 약 2초/프레임으로 충실한 합성 미리보기 (렌더링 없음). 렌더링 비용을 지불하기 전에 § Visual QA를 확인하십시오.
  5. render-and-composite.sh → 게이트 (타이밍 / 폐색+히어로 / 오버플로우 / 핸드오프) → final.mp4

사람들이 놓치는 중요한 규칙:

  • rail (기본값) + embed (승격). drop (필러, 표시되지 않음) / rail (전면의 정확한 하단 서브타이틀, 대부분 텍스트 전달) / embed (피사체 뒤에 합성된 피크 단어). Standard 모드는 둘 다 수행하며, 피크만 embed합니다. § Caption model 참조.
  • 비디오는 변경되지 않은 상태로 제공됩니다 (Standard/Cinematic; Theme 모드의 PLATE 예산은 유일한 허용 예외 — 레지스트리 게이트 반응 비트(차지-딤, 펀치, 쉐이크, 그레인)는 테마 DNA에 따라 정의되며, 매트 합성 후 적용되어 피사체+텍스트+플레이트가 하나의 프레임으로 움직입니다) — 캡션만 추가됩니다; 매트는 피사체가 embed 트랙을 가릴 수 있게 할 뿐입니다. 푸티지에 그레이딩/재색/스캔라인을 절대 적용하지 마십시오.
  • 두 가지 규칙서: rail → references/rail.md (얇음), embed 제작 → references/composition-craft.md (풍부함, embed 전용). 필요에 따라 훑어보십시오.

캡션 모델 — rail + embed

모든 말하는 구절은 다음 세 가지 중 하나입니다:

무엇표시 방법
drop필러 — 음/어, 더듬거림, 자기 수정표시되지 않음
rail기본값 — 일반적인 말하기 내용 (정확히)깔끔한 하단 서브타이틀, 전면에, 읽기 쉬움. 강조 단어는 인라인 emphasis 하이라이트(강조 색상 / 활성 단어 팝)를 얻을 수 있음 — rail에 그대로 유지됩니다.
embed승격된 피크 — 헤드라인 비트하나의 큰 단어가 피사체 뒤에 합성 (매트 폐색), 설계된 진입 + 종료

Rail은 대부분의 텍스트를 전달합니다; embed는 드물고 가치 있는 피크입니다. 희소성은 클립당이 아니라 비트/블록당입니다: 블록(생각)당 ≤1 히어로, 두 개가 동시에 보이지 않음, 히어로 창 사이에 최소 한 비트의 간격 (컴파일러는 0.6초 미만에서 경고). 짧은 클립 → 보통 1–2개; 긴 설명 → 섹션당 약 한 개. 여러 히어로 중 가장 큰 작성된 히어로가 APEX입니다 (이것만 전체 잠금 embed + 너비 맞춤 상승을 얻음); 작은 히어로는 MINOR 피크로, 열을 따라 과장된 강조 라인(fg, 감쇠 동작)으로 탑니다 — 모든 비트가 매트 쇼케이스를 필요로 하는 것은 아니며, 이것이 정확히 APEX를 이벤트로 유지합니다. 모든 단어를 embed하는 것은 여전히 흔한 실수입니다.

Rail-표면 정체성은 정확히 이것을 구축합니다 (rail = rail.html, embed = index.html의 클라이맥스). 열-흐름 정체성은 rail을 버리고 모든 것을 embed 스타일로 만듭니다 — 단어를 읽어야 하는 설명/음성해설이 아닌, 분위기-우선 요청에만 권장합니다 (CATALOG.md는 정체성별로 이를 인코딩합니다).


0단계 — CATALOG에서 하나의 정체성을 선택합니다

하나의 프론트엔드, 뒤에 세 개의 엔진. 사용자가 CATALOG.md에서 IDENTITY를 선택합니다 (35개 항목: 10개 클래식 + 25개 테마); 엔진, 컴파일러 및 작성 파일은 카탈로그 행에서 조회하여 파생됩니다. "Standard vs Cinematic vs Theme"를 질문으로 표시하지 마십시오 — 이것들은 백엔드 이름입니다 (제품은 여러 엔진을 가지고 있어도 하나의 UX를 가집니다). 카탈로그는 라우팅에 필요한 모든 것을 인코딩합니다: 읽기 표면, 음성, 권장 대상, 장면 요구사항, 진정으로 가까운 쌍(loud↔ordnance, neon↔neonsign, cream↔stardust)에 대한 인접 노트.

정체성 선택은 선호도 게이트입니다 (../hyperframes-core/references/brief-contract.md § 1): 자율 모드("놀라게 해줘" / "나를 위해 결정해줘")에서는 직접 후보 목록에서 선택하고 한 줄 이유를 말하십시오 (묻지 않고).

절차: 클립 탐사 → 카탈로그에서 2–3개 정체성 후보 목록 작성 → 한 줄 이유와 함께 하나를 추천 → 사용자가 선택 (자율 모드: 당신이 선택하고 이유를 말함) → 해당 정체성의 파일을 작성합니다. 정체성은 엔진에 잠겨 있습니다 (교차 조합 불가; 하나를 여는 것은 검증 이벤트입니다 — dna/README.md 참조).

항상 추천을 제시하고 작성하기 전에 사용자가 선택하도록 하십시오.

(전체 정체성 테이블은 CATALOG.md에 있습니다 — 라우팅의 단일 진실 공급원. 아래 엔진 문서는 각 백엔드의 작성 계약을 설명합니다.)

추천 휴리스틱: CATALOG.md의 "Shortlisting heuristics"를 사용하십시오 — 이것들은 정체성 수준입니다 (예: "炸"는 ordnance/stomp/terminal/loud를 후보로 하고 무엇이 폭발해야 하는지에 따라 선택), 절대 카테고리 수준이 아닙니다. 확실하지 않음 → anchor.

  • Cinematic → 잠긴 템플릿에 대해 plan.json을 작성하고, make-composition.cjs로 컴파일합니다.
  • Theme → themes/README.md를 읽고, theme.json을 작성하고, scripts/render-theme.sh를 실행합니다 (컴파일 + 렌더 + 플레이트 반응 → final_fx.mp4).

결정 게이트 — 먼저 실행

비디오를 탐사하고 두 모드 전에 장면을 분류합니다.

ffprobe <video.mp4>                    # 사양
ffmpeg -ss <t> -i <video.mp4> -vframes 1 sample.png   # 20/50/80% 지점

샘플을 읽으십시오. 다음의 경우 거부하십시오:

  • 여러 화자 / 하드 컷 (각 샷을 분할하여 렌더링하거나 거부)
  • 사람 피사체 없음 (이 스킬은 말하는 사람 용도)
  • 3초 미만, 말소리 없음, 또는 얼굴이 명확하게 보이지 않음 — transcribe.cjs는 오디오가 거의 무음일 때 경고합니다 (Whisper는 침묵 위에 "Thank you."와 같은 단어를 환각합니다); 경고를 따르고 거부하십시오 (조작된 단어에 캡션을 추가하지 마십시오)
  • 소스에 이미 자막/자막/무거운 텍스트 그래픽이 내장되어 있음 — 두 번째 캡션 시스템을 추가하면 충돌이 발생하고 푸티지는 변경되지 않은 상태로 제공됩니다 (커버/인페인팅 없음). 내장된 텍스트는 종종 클립 중간에만 나타납니다: 1fps 접촉 시트를 샘플링하십시오 (ffmpeg -i in.mp4 -vf "fps=1,scale=160:-1,tile=10x5" sheet.png), 3개의 스팟 프레임을 신뢰하지 마십시오.
  • 전사가 쓰레기인 경우 — 비원어민/심한 악센트 음성은 자신 있는 횡설수설로 전사될 수 있습니다. 작성 전에 transcript.json을 건전성 확인하십시오; 언어로 해석되지 않으면 WHISPER_MODEL=medium을 한 번 시도하고, 그렇지 않으면 거부하십시오 (조작된 단어의 정확한 rail은 캡션이 없는 것보다 나쁩니다).
  • 빠른 움직임이 있는 바쁜 핸드헬드 (매트 깜빡임)

사전 비행 점검 (비용 없음, 최악의 실패 방지)

  1. 샷 컷 점검. 프레임을 20%, 50%, 80%에서 샘플링하십시오. 다른 피사체/장면이 나타나면 컷 전에 클립을 트리밍하십시오.
  2. 레터박스 / 필러박스 점검. 첫 번째 프레임에 검은 막대가 있습니까? 안전한 콘텐츠 사각형을 계산하고 그 안에 캡션 배치를 제한하십시오.
  3. 휘도 점검. 캡션 영역의 평균 휘도를 샘플링하십시오 — 60 미만 → 밝은 텍스트가 그대로 읽힘, 60-180 → 글리프 스크림 추가, 180 이상 → 불투명한 텍스트 + 스크림 (절대 맨 밝은 텍스트 사용 금지). Cinematic 템플릿은 크림+screen으로 고정되어 있습니다 — 이 점검을 사용하여 _적합한 정체성을 선택_하십시오 (밝은 장면 → ink, 또는 불투명 rail anchor 테마), 하나를 다시 색칠하지 마십시오.
  4. 톤별 정체성 추천 (당신이 추천; 사용자가 선택 — 0단계 + CATALOG.md 참조). 설명/인터뷰/반드시 읽어야 할 단어 → rail/panel-표면 정체성; 시적/소셜/"시네마틱" → 등록별 열-흐름 정체성; "炸 / 特效 / VFX" / 명명된 세계 → 테마 정체성. 확실하지 않을 때 → anchor (단어 읽힘, 장면 안전) — 하지만 후보 목록을 제시하고 사용자가 선택하도록 하십시오.

파이프라인 — 5단계

1. hyperframes init <project> --non-interactive --video <video.mp4> --skill=embedded-captions
2. bash scripts/prepare.sh <project>       # matte ∥ transcribe (병렬) → safe-zones. 하나의 명령어.
                                           #   → frames_fg/ transcript.json safe-zones.json
3. [AGENT STEP — 유일한 창작 단계] 작은 JSON 작성; 아래 모드별 참조
   Cinematic: plan.json 작성 → node scripts/fill-timings.cjs → fit-fonts.cjs → make-composition.cjs
   Theme:     theme.json 작성 → bash scripts/render-theme.sh <project>   (컴파일 + 렌더 + 플레이트 fx)
4. node scripts/preview-frames.cjs <project>   # ~2초/프레임 합성 미리보기 → § Visual QA (렌더링 전)
5. bash scripts/render-and-composite.sh <project>  # 게이트 → final.mp4 + history/ 스냅샷
   (Theme 모드: 3b/5단계 건너뜀 — render-theme.sh가 이미 컴파일 + render-and-composite
    + _postfx.sh를 실행; 결과물은 final_fx.mp4, final.mp4는 플레이트 반응 전)

1단계의 init은 설치된 스킬을 GitHub의 최신 버전과 비교하고 오래된 것이 있으면 전역 세트를 업데이트합니다.

3단계는 모드에 따라 다릅니다:

3단계 — Cinematic 모드 (순수 embed)

  1. 먼저 safe-zones.json을 읽으십시오. 내레이션 평면은 **zones.hugLeft/hugRight**에 들어갑니다 — 실루엣에 인접한 깨끗한 스트립 (피사체에서 먼 텍스트는 떠 있는 것처럼 읽히며, embed되지 않음; 먼 모서리는 기본값이 아닌 대체 수단). 히어로는 기본적으로 heroAnchor/heroBands.best (피사체에 중앙, ~30–55% 가려짐)입니다. recommendation:"fg"은 가독성을 위해 내레이션을 전면으로 이동시킵니다; 히어로는 heroBands.feasible일 때마다 embed된 상태로 유지됩니다 — 히어로-fg는 최후의 수단입니다.
  2. DNA는 0단계에서 선택한 정체성입니다 (CATALOG.md) — 여기서 선택을 다시 열지 마십시오. 장면에 대해 건전성 확인하십시오 (밝은 히어로 밴드 휘도 > 150은 ink가 필요; 전체 선택 지침은 neon / glitch / chrome / velocity를 포함한 모든 10개를 다루는 카탈로그에 있습니다). 선택 + 이유를 진술하십시오; 사용자가 결정합니다. DNA는 유형/팔레트/블렌드/동작 + 히어로 3막을 잠급니다; safe-zones v2 (palette/optics/lighting)는 이를 이 장면에 자동으로 매개변수화합니다.
  3. <project>/cinematic.json을 작성하십시오 — "dna": "<name>" + 생각-BLOCKS, 원시 그룹이 아님: 각 블록 = 단어 라인 (절 경계에서 2–5개 그룹) + 쌓을 평면 + 라인별 css (크기/두께/스타일만 — 위치 없음) + 최대 하나의 라인에 "hero": true 표시 (승격된 단어; 표시 형태는 "text"). 스키마: scripts/make-cinematic.cjs 헤더.
  4. 컴파일: node scripts/make-cinematic.cjs <project> — 블록을 plan.json → index.html로 낮춤. 자동 생성: 전사-시퀀싱된 타이밍, 블록 내 축적, 블록 간 페이지 플립, 히어로 잠금 (히어로 블록의 사전 컨텍스트, HERO 및 사후 컨텍스트가 피사체에 중앙에 배치된 하나의 결합된 구성으로 스택 — 읽기 순서 위→아래 = 구성상 말하는 순서; 컨텍스트는 전면에 뜨고 히어로는 뒤에 embed = 깊이 샌드위치; 질량 규칙은 히어로가 컨텍스트를 지배하도록 유지), apex/minor 히어로 분할, 구성상 읽기 순서, safe-zones별 fg 폴백. 그런 다음 게이트가 평소대로 실행됩니다. (plan.json을 직접 수동 작성하는 것은 블록이 표현할 수 없는 디자인에 대해 가능합니다 — 그런 다음 fill-timings.cjs + fit-fonts.cjs + make-composition.cjs를 직접 실행하십시오.)

3단계 — Theme 모드 (테마 체계)

먼저 themes/README.md를 읽으십시오 — 패러다임/세트피스 레지스트리, 연결, 하드 규칙 및 정확한 theme.json 스키마.

  1. 콘텐츠 등록별로 테마 DNA 선택 (각 themes/<name>.json에는 voice + when이 있습니다). 선택 + 이유를 진술하십시오; 사용자가 결정합니다.
  2. <project>/theme.json을 작성하십시오 — dna, lines (정확히, 전사 순서; 1

캡션 모델 — rail + embed

모든 말하는 구절은 다음 세 가지 중 하나입니다:

무엇표시 방법
drop필러 — 음/어, 더듬거림, 자기 수정표시되지 않음
rail기본값 — 일반적인 말하기 내용 (정확히)깔끔한 하단 서브타이틀, 전면에, 읽기 쉬움. 강조 단어는 인라인 emphasis 하이라이트(강조 색상 / 활성 단어 팝)를 얻을 수 있음 — rail에 그대로 유지됩니다.
embed승격된 피크 — 헤드라인 비트하나의 큰 단어가 피사체 뒤에 합성 (매트 폐색), 설계된 진입 + 종료

Rail은 대부분의 텍스트를 전달합니다; embed는 드물고 가치 있는 피크입니다. 희소성은 클립당이 아니라 비트/블록당입니다: 블록(생각)당 ≤1 히어로, 두 개가 동시에 보이지 않음, 히어로 창 사이에 최소 한 비트의 간격 (컴파일러는 0.6초 미만에서 경고). 짧은 클립 → 보통 1–2개; 긴 설명 → 섹션당 약 한 개. 여러 히어로 중 가장 큰 작성된 히어로가 APEX입니다 (이것만 전체 잠금 embed + 너비 맞춤 상승을 얻음); 작은 히어로는 MINOR 피크로, 열을 따라 과장된 강조 라인(fg, 감쇠 동작)으로 탑니다 — 모든 비트가 매트 쇼케이스를 필요로 하는 것은 아니며, 이것이 정확히 APEX를 이벤트로 유지합니다. 모든 단어를 embed하는 것은 여전히 흔한 실수입니다.

Rail-표면 정체성은 정확히 이것을 구축합니다 (rail = rail.html, embed = index.html의 클라이맥스). 열-흐름 정체성은 rail을 버리고 모든 것을 embed 스타일로 만듭니다 — 단어를 읽어야 하는 설명/음성해설이 아닌, 분위기-우선 요청에만 권장합니다 (CATALOG.md는 정체성별로 이를 인코딩합니다).


0단계 — CATALOG에서 하나의 정체성을 선택합니다

하나의 프론트엔드, 뒤에 세 개의 엔진. 사용자가 CATALOG.md에서 IDENTITY를 선택합니다 (35개 항목: 10개 클래식 + 25개 테마); 엔진, 컴파일러 및 작성 파일은 카탈로그 행에서 조회하여 파생됩니다. "Standard vs Cinematic vs Theme"를 질문으로 표시하지 마십시오 — 이것들은 백엔드 이름입니다 (제품은 여러 엔진을 가지고 있어도 하나의 UX를 가집니다). 카탈로그는 라우팅에 필요한 모든 것을 인코딩합니다: 읽기 표면, 음성, 권장 대상, 장면 요구사항, 진정으로 가까운 쌍(loud↔ordnance, neon↔neonsign, cream↔stardust)에 대한 인접 노트.

정체성 선택은 선호도 게이트입니다 (../hyperframes-core/references/brief-contract.md § 1): 자율 모드("놀라게 해줘" / "나를 위해 결정해줘")에서는 직접 후보 목록에서 선택하고 한 줄 이유를 말하십시오 (묻지 않고).

절차: 클립 탐사 → 카탈로그에서 2–3개 정체성 후보 목록 작성 → 한 줄 이유와 함께 하나를 추천 → 사용자가 선택 (자율 모드: 당신이 선택하고 이유를 말함) → 해당 정체성의 파일을 작성합니다. 정체성은 엔진에 잠겨 있습니다 (교차 조합 불가; 하나를 여는 것은 검증 이벤트입니다 — dna/README.md 참조).

항상 추천을 제시하고 작성하기 전에 사용자가 선택하도록 하십시오.

(전체 정체성 테이블은 CATALOG.md에 있습니다 — 라우팅의 단일 진실 공급원. 아래 엔진 문서는 각 백엔드의 작성 계약을 설명합니다.)

추천 휴리스틱: CATALOG.md의 "Shortlisting heuristics"를 사용하십시오 — 이것들은 정체성 수준입니다 (예: "炸"는 ordnance/stomp/terminal/loud를 후보로 하고 무엇이 폭발해야 하는지에 따라 선택), 절대 카테고리 수준이 아닙니다. 확실하지 않음 → anchor.

  • Cinematic → 잠긴 템플릿에 대해 plan.json을 작성하고, make-composition.cjs로 컴파일합니다.
  • Theme → themes/README.md를 읽고, theme.json을 작성하고, scripts/render-theme.sh를 실행합니다 (컴파일 + 렌더 + 플레이트 반응 → final_fx.mp4).

결정 게이트 — 먼저 실행

비디오를 탐사하고 두 모드 전에 장면을 분류합니다.

ffprobe <video.mp4>                    # 사양
ffmpeg -ss <t> -i <video.mp4> -vframes 1 sample.png   # 20/50/80% 지점

샘플을 읽으십시오. 다음의 경우 거부하십시오:

  • 여러 화자 / 하드 컷 (각 샷을 분할하여 렌더링하거나 거부)
  • 사람 피사체 없음 (이 스킬은 말하는 사람 용도)
  • 3초 미만, 말소리 없음, 또는 얼굴이 명확하게 보이지 않음 — transcribe.cjs는 오디오가 거의 무음일 때 경고합니다 (Whisper는 침묵 위에 "Thank you."와 같은 단어를 환각합니다); 경고를 따르고 거부하십시오 (조작된 단어에 캡션을 추가하지 마십시오)
  • 소스에 이미 자막/자막/무거운 텍스트 그래픽이 내장되어 있음 — 두 번째 캡션 시스템을 추가하면 충돌이 발생하고 푸티지는 변경되지 않은 상태로 제공됩니다 (커버/인페인팅 없음). 내장된 텍스트는 종종 클립 중간에만 나타납니다: 1fps 접촉 시트를 샘플링하십시오 (ffmpeg -i in.mp4 -vf "fps=1,scale=160:-1,tile=10x5" sheet.png), 3개의 스팟 프레임을 신뢰하지 마십시오.
  • 전사가 쓰레기인 경우 — 비원어민/심한 악센트 음성은 자신 있는 횡설수설로 전사될 수 있습니다. 작성 전에 transcript.json을 건전성 확인하십시오; 언어로 해석되지 않으면 WHISPER_MODEL=medium을 한 번 시도하고, 그렇지 않으면 거부하십시오 (조작된 단어의 정확한 rail은 캡션이 없는 것보다 나쁩니다).
  • 빠른 움직임이 있는 바쁜 핸드헬드 (매트 깜빡임)

사전 비행 점검 (비용 없음, 최악의 실패 방지)

  1. 샷 컷 점검. 프레임을 20%, 50%, 80%에서 샘플링하십시오. 다른 피사체/장면이 나타나면 컷 전에 클립을 트리밍하십시오.
  2. 레터박스 / 필러박스 점검. 첫 번째 프레임에 검은 막대가 있습니까? 안전한 콘텐츠 사각형을 계산하고 그 안에 캡션 배치를 제한하십시오.
  3. 휘도 점검. 캡션 영역의 평균 휘도를 샘플링하십시오 — 60 미만 → 밝은 텍스트가 그대로 읽힘, 60-180 → 글리프 스크림 추가, 180 이상 → 불투명한 텍스트 + 스크림 (절대 맨 밝은 텍스트 사용 금지). Cinematic 템플릿은 크림+screen으로 고정되어 있습니다 — 이 점검을 사용하여 _적합한 정체성을 선택_하십시오 (밝은 장면 → ink, 또는 불투명 rail anchor 테마), 하나를 다시 색칠하지 마십시오.
  4. 톤별 정체성 추천 (당신이 추천; 사용자가 선택 — 0단계 + CATALOG.md 참조). 설명/인터뷰/반드시 읽어야 할 단어 → rail/panel-표면 정체성; 시적/소셜/"시네마틱" → 등록별 열-흐름 정체성; "炸 / 特效 / VFX" / 명명된 세계 → 테마 정체성. 확실하지 않을 때 → anchor (단어 읽힘, 장면 안전) — 하지만 후보 목록을 제시하고 사용자가 선택하도록 하십시오.

파이프라인 — 5단계

1. hyperframes init <project> --non-interactive --video <video.mp4> --skill=embedded-captions
2. bash scripts/prepare.sh <project>       # matte ∥ transcribe (병렬) → safe-zones. 하나의 명령어.
                                           #   → frames_fg/ transcript.json safe-zones.json
3. [AGENT STEP — 유일한 창작 단계] 작은 JSON 작성; 아래 모드별 참조
   Cinematic: plan.json 작성 → node scripts/fill-timings.cjs → fit-fonts.cjs → make-composition.cjs
   Theme:     theme.json 작성 → bash scripts/render-theme.sh <project>   (컴파일 + 렌더 + 플레이트 fx)
4. node scripts/preview-frames.cjs <project>   # ~2초/프레임 합성 미리보기 → § Visual QA (렌더링 전)
5. bash scripts/render-and-composite.sh <project>  # 게이트 → final.mp4 + history/ 스냅샷
   (Theme 모드: 3b/5단계 건너뜀 — render-theme.sh가 이미 컴파일 + render-and-composite
    + _postfx.sh를 실행; 결과물은 final_fx.mp4, final.mp4는 플레이트 반응 전)

1단계의 init은 설치된 스킬을 GitHub의 최신 버전과 비교하고 오래된 것이 있으면 전역 세트를 업데이트합니다.

3단계는 모드에 따라 다릅니다:

3단계 — Cinematic 모드 (순수 embed)

  1. 먼저 safe-zones.json을 읽으십시오. 내레이션 평면은 **zones.hugLeft/hugRight**에 들어갑니다 — 실루엣에 인접한 깨끗한 스트립 (피사체에서 먼 텍스트는 떠 있는 것처럼 읽히며, embed되지 않음; 먼 모서리는 기본값이 아닌 대체 수단). 히어로는 기본적으로 heroAnchor/heroBands.best (피사체에 중앙, ~30–55% 가려짐)입니다. recommendation:"fg"은 가독성을 위해 내레이션을 전면으로 이동시킵니다; 히어로는 heroBands.feasible일 때마다 embed된 상태로 유지됩니다 — 히어로-fg는 최후의 수단입니다.
  2. DNA는 0단계에서 선택한 정체성입니다 (CATALOG.md) — 여기서 선택을 다시 열지 마십시오. 장면에 대해 건전성 확인하십시오 (밝은 히어로 밴드 휘도 > 150은 ink가 필요; 전체 선택 지침은 neon / glitch / chrome / velocity를 포함한 모든 10개를 다루는 카탈로그에 있습니다). 선택 + 이유를 진술하십시오; 사용자가 결정합니다. DNA는 유형/팔레트/블렌드/동작 + 히어로 3막을 잠급니다; safe-zones v2 (palette/optics/lighting)는 이를 이 장면에 자동으로 매개변수화합니다.
  3. <project>/cinematic.json을 작성하십시오 — "dna": "<name>" + 생각-BLOCKS, 원시 그룹이 아님: 각 블록 = 단어 라인 (절 경계에서 2–5개 그룹) + 쌓을 평면 + 라인별 css (크기/두께/스타일만 — 위치 없음) + 최대 하나의 라인에 "hero": true 표시 (승격된 단어; 표시 형태는 "text"). 스키마: scripts/make-cinematic.cjs 헤더.
  4. 컴파일: node scripts/make-cinematic.cjs <project> — 블록을 plan.json → index.html로 낮춤. 자동 생성: 전사-시퀀싱된 타이밍, 블록 내 축적, 블록 간 페이지 플립, 히어로 잠금 (히어로 블록의 사전 컨텍스트, HERO 및 사후 컨텍스트가 피사체에 중앙에 배치된 하나의 결합된 구성으로 스택 — 읽기 순서 위→아래 = 구성상 말하는 순서; 컨텍스트는 전면에 뜨고 히어로는 뒤에 embed = 깊이 샌드위치; 질량 규칙은 히어로가 컨텍스트를 지배하도록 유지), apex/minor 히어로 분할, 구성상 읽기 순서, safe-zones별 fg 폴백. 그런 다음 게이트가 평소대로 실행됩니다. (plan.json을 직접 수동 작성하는 것은 블록이 표현할 수 없는 디자인에 대해 가능합니다 — 그런 다음 fill-timings.cjs + fit-fonts.cjs + make-composition.cjs를 직접 실행하십시오.)

3단계 — Theme 모드 (테마 체계)

먼저 themes/README.md를 읽으십시오 — 패러다임/세트피스 레지스트리, 연결, 하드 규칙 및 정확한 theme.json 스키마.

  1. 콘텐츠 등록별로 테마 DNA 선택 (각 themes/<name>.json에는 voice + when이 있습니다). 선택 + 이유를 진술하십시오; 사용자가 결정합니다.
  2. <project>/theme.json을 작성하십시오 — dna, lines (정확히, 전사 순서; 필요한 경우에만 단어 교체), paradigm (rail/panel/poem/takeover; 기본값 = anchor의 rail), setpiece (선택 사항, 세트피스 레지스트리에서), fx (자막이 아닌 아티팩트 — 아날로그 그레인, CRT 아티팩트, 스타더스트 반짝임).

Individual skills in this repo

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

faceless-explainer

Turn arbitrary text — an article, notes, a topic, a brief — into a faceless explainer video: there is no site or footage to capture, so the visuals are invented per scene (typography, abstract graphics, diagrams, data-viz). Use for topic explainers, concept breakdowns, how-tos, listicles. Not a video built from a website (/product-launch-video — promo or tour). Unclear → /hyperframes.

figma

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.

general-video

>

hyperframes

>

hyperframes-animation

All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition

hyperframes-audio

>

hyperframes-cli

>

hyperframes-core

The HyperFrames composition contract — build one renderable project. Use for composition structure, the `data-*` timing attributes, `class=

hyperframes-creative

Non-animation creative direction for HyperFrames videos. Use for design spec (frame.md / design.md) handling, palettes, typography, narration, beat planning, audio-reactive visuals, composition patterns, and brand / style decisions. For atomic motion patterns and scene blueprints, use `hyperframes-animation`.

hyperframes-keyframes

>

hyperframes-registry

Install, discover, and wire registry blocks and components into HyperFrames compositions. Use when running hyperframes add or hyperframes catalog, installing one item or every block matching a tag, wiring an installed item into index.html, or working with hyperframes.json. Covers discovery, install locations, block sub-composition wiring, component snippet merging, and authoring a new block or component to contribute upstream (idea → scaffold → validate → PR).

jasonfast123/hyperframes-skills

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.

media-use

Agent Media OS, the single skill for every media need in a HyperFrames project. Resolve BGM, SFX, image, icon, brand logo, voice, color grade, or LUT into a frozen local file or paste-ready block + ledger record (one verb, `resolve`); generate via TTS / music / image models when the catalog misses; produce voiceover, transcription, captions, and background removal through one shared audio engine; operate on media (cut / reframe / transform); and reuse assets across projects. Also use for vague feedback that real footage looks dark, flat, boring, should feel retro/camcorder/print/ASCII, needs privacy, or needs a media reveal.

motion-graphics

>

music-to-video

Turn a music track (an audio file, a video to pull audio from, or a track generated from a mood brief) into a beat-synced video — lyric video, slideshow, or kinetic promo. The music drives all pacing; any user-supplied images/videos are cut onto the same beat grid, and a complete video needs zero assets. Narrated pieces → the input-matched workflow (see /hyperframes). Unclear → /hyperframes.

pr-to-video

Turn a GitHub pull request (a PR URL, owner/repo#N, or

remotion-to-hyperframes

Port an existing Remotion (React) composition

slideshow

>

talking-head-recut

Package an existing talking-head / interview / podcast video with timed, designed GRAPHIC OVERLAY cards — kinetic titles, lower-thirds, data callouts, quotes, side panels, picture-in-picture — synced to the transcript, on a 16:9 / 9:16 / 4:5 canvas of your choice; the clip plays untouched underneath. Trigger on

관련 스킬