Communitygithub.com

heygen-com/hyperframes

자막 오버레이 원칙 — 자막 모델(드롭/레일/임베드)과 자막은 영상 위에 합성되는 오버레이이며 콘텐츠를 밀어 올리기 위해 예약된 하단 영역이 아니라는 규칙을 다룹니다. 토킹헤드 또는 런칭 비디오에 자막을 추가할 때, 특정 구절을 드롭할지, 레일(그대로 표시)에 표시할지, 또는 희소한 임베드 클라이맥스로 승격할지 결정할 때, 자막을 포함할 구도를 설계할 때, 그리고 자막 아래에서 진정한 프레임 중앙을 기준으로 구도를 맞출 때 사용하세요.

hyperframes란 무엇인가요?

이 스킬은 자막이 단순히 하단에 붙는 레이블이 아니라, 영상 콘텐츠 위에 오버레이되어 합성되어야 한다는 원칙을 정의합니다. 두 가지 핵심 개념을 결합합니다: 첫째, 모든 음성 구절을 '드롭'(불필요한 말), '레일'(기본 자막), '임베드'(드문 강조)로 분류하는 캡션 모델입니다. 둘째, 자막은 콘텐츠를 위해 공간을 비우는(reserved zone) 방식이 아닌, 영상 위에 오버레이되어야 한다는 오버레이 법칙입니다. 이 원칙은 `embedded-captions` 스킬 위에 적용되며, 자막이 콘텐츠를 가리더라도 시각적 판단으로 가독성을 평가하고, 더 이상 기계적인 'keep-out gate'를 사용하지 않습니다. 주로 토킹헤드 영상, 제품 런칭 비디오, 그리고 익스플레이너 콘텐츠 제작 시에 유용합니다.

지원 대상~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/heygen-com/hyperframes/tree/HEAD/.agents/skills/captions-overlay

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

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

문서

자막 오버레이 원칙

오버레이 원칙 — 상위 embedded-captions 스킬을 보완합니다. 이 스킬은 그 위에 적용되며, 상위 스킬에 포함되어 있지 않다고 가정합니다.

두 가지 아이디어가 결합됩니다. 첫째, 캡션 모델 — 모든 음성 구절은 drop, rail, 또는 embed이며, embed는 기본값이 아닌 희소하게 얻은 절정입니다. 둘째, 오버레이 법칙 — 자막 줄은 영화 위에 오버레이로 합성되며, 예약된 영역이 아니므로 콘텐츠를 위로 밀거나 자막을 위한 빈 공간을 남기지 않습니다. 이 두 가지는 서로를 강화합니다: 자막이 오버레이로 표시되기 때문에(앞에 있는 그대로의 레일, 때로는 피사체 뒤에 있는 임베드), 구도는 전체 프레임을 유지하고 진정한 수직 중앙에 중심을 둡니다.

캡션 모델 — drop / rail / embed

모든 음성 구절은 세 가지 중 하나입니다(embedded-captions에서 그대로 인용):

내용표시 방법
drop필러(음/어), 더듬거림, 자기 수정표시되지 않음
rail기본값 — 일반적인 음성 내용 (그대로)깔끔한 하단 서브타이틀, 앞에, 읽기 쉽게. 강조 단어는 인라인 emphasis 하이라이트(액센트 색상 / 활성 단어 팝)를 받을 수 있습니다 — 레일에 그대로 유지됩니다.
embed승격된 절정 — 헤드라인 비트피사체 뒤에 합성된 하나의 큰 단어(매트 오클루전), 디자인된 진입 및 퇴장

레일이 대부분의 텍스트를 담당하며, embed는 희소하고 얻기 힘든 절정입니다 — 비트당 ≤1개, 인접하거나 동시에 보이지 않으며, 비트 이상 간격을 둡니다. 짧은 클립 → 보통 하나의 embed; 긴 설명 영상 → 섹션당 약 하나. 모든 단어를 embed하는 것이 흔한 실수입니다.

이것은 Standard 모드 형태입니다(rail = 그대로의 하단 서드; embed = 피사체 뒤에 합성된 클라이맥스). Cinematic 모드는 레일을 없애고 모든 것을 embed 스타일로 만듭니다 — 순수 영화적 요청에만 사용하고, 단어를 읽어야 하는 설명/내레이터에는 절대 사용하지 마십시오.

레일 우선, embed 희소 (핵심 규칙)

embedded-captions의 확정 규칙에서 인용:

  • 토킹헤드/설명 영상은 레일 우선. 전체 대본을 embed하지 마십시오 — 대부분의 텍스트는 레일이며, embed는 절정만을 위한 것입니다. 모든 것을 embed하는 것이 기본적인 실수입니다.
  • embed는 희소하며 간격을 둡니다. 문장/비트당 ≤1개의 embed, 인접하거나 동시에 보이지 않으며, 비트 이상 간격, 최대 하나의 apex. climax = 비트당 절정이며, "전체 클립의 단일 페이오프"가 아닙니다.

오버레이 법칙 — 자막은 예약된 영역이 아닙니다

생성된 런칭 구도에서 자막이 활성화되면, Finalize는 작고 최소한의 단어별 자막 줄을 전체 영화 위에 오버레이 레이어로 합성합니다(하단 중앙에 위치한 단일 텍스트 줄, 캔버스 높이의 약 하단 5~8%). 이는 오버레이일 뿐, 예약된 영역이 아닙니다(제품-런칭-비디오 씬 에이전트의 제약 조건 #13에서 그대로 인용):

  • 구도를 진정한 수직 중앙 — y = H / 2에 맞추십시오(가로 540, 세로 960). 자막을 위한 공간을 만들기 위해 콘텐츠를 위로 밀지 마십시오; 0.42 × H에 중심을 두고 하단에 빈 영역이 있는 구도는 버그이지, 해결책이 아닙니다.
  • 콘텐츠는 캔버스 하단까지 확장될 수 있습니다. 전체 프레임 피사체, 레일, 배경 모두 허용됩니다.
  • 하나의 부드러운 예의 규칙: 중요한 작은 읽을 수 있는 텍스트(URL 줄, 법적 고지 줄, 보조 캡션)를 자막 줄이 위치하는 하단 약 80px 중앙 범위에 정확히 배치하지 마십시오 — 오버레이가 충돌할 수 있습니다. 자막 아래의 큰 이미지/카드/주변 콘텐츠는 괜찮습니다; 자막 스킨은 콘텐츠 위에서 읽을 수 있도록 설계되었습니다.
  • 기계적인 keep-out 게이트는 없습니다(이전 captions.mjs keepout 검사는 폐기됨). Finalize 스냅샷 QA는 자막-위-콘텐츠 가독성을 시각적으로 판단합니다.

자막이 비활성화된 경우: 동일한 포지셔닝 자유 — 오버레이가 단순히 존재하지 않습니다.

이 두 규칙이 하나의 원칙인 이유

모델에 따르면 레일은 앞에 표시되고 embed는 피사체 뒤에 합성된 드문 단어입니다 — 둘 다 손대지 않은 푸티지에 추가되는 레이어입니다. 오버레이 법칙에 따르면 자막 줄은 전체 영화 위에 합성되는 레이어이지, 레이아웃에서 잘라낸 영역이 아닙니다. 따라서 캡셔닝 파이프라인과 런칭 비디오 파이프라인 모두에서 자막은 예약하는 영역이 아니라 추가하는 오버레이입니다:

  • 전체 프레임을 유지하고, 진정한 중앙에 중심을 맞추며, 콘텐츠가 가장자리까지 닿도록 하십시오.
  • 레일(또는 작은 오버레이 자막 줄)이 그대로의 단어를 담당하게 하십시오.
  • 진정한 절정에서만 단어를 embed로 승격시키십시오 — 희소하고, 간격을 두며, 동시에 두 개가 되지 않게.
  • 아무것도 예약하지 말고, 자막-위-콘텐츠 가독성을 keep-out 게이트가 아닌 시각적으로 판단하십시오.

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

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

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

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

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

Glass shards fly in through fog and tile themselves into the headline. HyperFrames block, 1920×1080, 12.16s, 19 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

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

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

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.

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

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

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]

관련 스킬