Communitygithub.com

일반 비디오

HyperFrames 기술 스택을 사용하여 종속성을 관리하고, 브리핑에서 시작하며, 시나리오 보드를 작성하고, 공동 작업 또는 자동화 흐름에 따라 비디오를 구성하는 일반 비디오 제작 기술입니다.

일반 비디오란 무엇인가요?

이 기술은 HyperFrames 프레임워크를 기반으로 비디오 제작을 위한 엔드 투 엔드 워크플로우를 제공합니다. 주요 기능으로는 미디어 소스(Figma, 오디오, 이미지 등) 연결, 프로젝트 상태 기반 초기화(BRIEF.md, storyboard 등), 명확한 협업(companion) 또는 자동화(automation) 흐름 설정, 체계적인 계획 수립 및 실행이 포함됩니다. 특히 협업 흐름에서는 사용자가 감독(director) 역할을 하며, 기술은 최고 수준의 창의적 결과물(ceiling treatment)을 제안합니다. 또한 비디오 편집(컷, 트리밍, 오디오 동기화), 시각 효과(줌, 팬, 크롭), 멀티 씬 구성, 디자인 일관성 검증 등을 지원합니다. 이 기술은 Claude Code, Cursor, Codex와 같은 AI 코딩 도구와 함께 사용되도록 설계되었으며, HyperFrames 코어, 크리에이티브, 애니메이션, 미디어 사용 등 다양한 레퍼런스를 조건에 따라 로드하여 문맥을 효율적으로 유지합니다.

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

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

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

문서

일반 비디오(General video)

이 워크플로우에 의존하기 전에 다음을 실행하세요:

npx hyperframes skills update general-video

아무 작업 없이 성공하면 기술이 최신 상태임을 의미합니다. 업데이트 실패 시 메모리에서 계속 진행하지 말고 장애물로 표시하세요.

1. 중요 소스 어댑터 적용

  • 미디어: 오디오, 이미지, 아이콘, 로고, 음성, 그레이딩(grade), LUT, 치료/효과(treatment/effect), 자막(caption) 또는 미디어 작업이 필요한 경우 /media-use를 로드하고 ../media-use/references/resolve.md (해결, 채택, 재사용) 및 ../media-use/references/setup-providers.md (제공자, 인증)을 따르세요. 모호한 푸티지 피드백과 명명된 스타일은 편집 전에 ../media-use/references/media-treatments.md를 사용하세요. CSS/SVG/불투명도로 지원되는 미디어 효과를 즉석에서 만들지 마세요. 인증된 제공자 작업 전에 먼저 npx hyperframes auth status를 실행하고 그 출력을 그대로 전달하세요. 로그아웃 상태인 경우 ../hyperframes/references/brief-contract.md의 게이트를 적용하세요: 협업 흐름은 로그인 또는 명시적인 오프라인 선택을 기다립니다. 자율 흐름은 상태를 알리고 사용 가능한 오프라인 제공자를 통해 계속 진행합니다. 필요한 기능을 충족할 수 있는 오프라인 제공자가 없으면 장애물을 표시하세요. 로컬 채택만으로는 인증 게이트가 필요하지 않습니다.
  • Figma: 입력이 figma.com URL인 경우 먼저 /figma를 실행하세요. 내보낸 자산, 토큰, 컴포넌트 또는 스토리보드 프레임을 기반으로 빌드하세요. 원시 Figma 커넥터 호출은 SVG 삭제, 미디어 출처 및 브랜드 토큰 바인딩을 건너뛰므로 사용하지 마세요.

이 어댑터들은 /hyperframes가 선택한 워크플로우를 변경하지 않습니다.

2. 프로젝트 상태에서 시작

일치하는 첫 번째 행을 적용하세요. 낮은 상태 행은 평가하지 마세요:

상태작업
특정 편집(edit)편집을 수행하고 기존 프로젝트 결정을 유지한 후 영향을 받는 검사를 다시 실행하세요. 발견(discovery) 단계를 다시 열지 마세요.
BRIEF.md가 존재함읽으세요. workflow가 다른 워크플로우를 지정하고 flow가 companion이 아니면 인계하세요. 브리핑 질문을 하지 마세요.
브리핑은 없지만 hyperframes.json 또는 STORYBOARD.md가 존재함파일과 기록된 선호도에서 재개하세요. 알려진 사실에서만 BRIEF.md를 백필하세요.
새로 생성(fresh creation)/hyperframes와 그 의도 레이어를 실행하세요. workflow: general-video 또는 flow: companion에 대해서만 여기로 돌아오세요.

새 프로젝트의 경우 브리핑에서 케밥 케이스(kebab-case) 디렉토리 이름을 선택하고 브리핑을 작성하기 전에 스캐폴딩하세요:

npx hyperframes init "videos/<project>" --non-interactive --example=blank --skill=general-video

그런 다음 ../hyperframes/references/brief-format.md를 사용하여 프로젝트 루트에 BRIEF.md를 작성하세요. 기존 프로젝트에서 루트는 hyperframes.json이 포함된 디렉토리입니다. 브리핑 형식이 지정한 확인된 선호도 기반 필드만 기록하고 node <MEDIA_DIR>/scripts/prefs.mjs record --hyperframes <PROJECT_ROOT>를 사용하세요. 추론된 기본값은 절대 기록하지 마세요. 여기서 <MEDIA_DIR>은 설치된 /media-use 기술 디렉토리이고 <PROJECT_ROOT>는 hyperframes.json이 포함된 디렉토리입니다. 의도 레이어가 레시피를 채택한 경우 지금 node <MEDIA_DIR>/scripts/recipe.mjs use --hyperframes <PROJECT_ROOT> --name <name>을 적용하고 다시 묻지 마세요.

3. 실행 형태 해석

../hyperframes/references/brief-contract.md의 표준 용어만 사용하세요:

필드의미효과
flow누가 주도하는가automation: 경로를 선택하고 실행합니다. companion: 대화에서 함께 창작합니다.
storyboard빌드 전 계획, 스케치 및 검토yes: 계획 및 스케치 검토를 실행합니다(storyboard.html). no: 건너뜁니다.
파생된 mode체크포인트 게이트의 작동 방식브리핑 계약을 따르세요. 사용자에게 모드 이름을 묻지 마세요.

이러한 상태에 대한 동의어를 만들지 마세요. 진행 중인 "그냥 빌드해" 신호는 의도 레이어에 의해 처리되며 flow: automation, storyboard: no로 도착합니다.

  • flow: automation의 경우 경로를 선택하고 첫 번째 진행 업데이트에서 한 줄로 표시하세요.
  • 특정 편집의 경우 새 경로를 만들지 않고 편집을 수행하세요.

기존 푸티지를 하드 컷, 트림, 접합 또는 재정렬하려면 동일한 비디오 소스를 여러 클립 요소에 복제하세요. 각 복사본에서 data-media-start와 data-duration으로 소스 범위를 설정한 다음 data-start로 작성된 배치/순서를 설정하세요. 별도로 작성된 오디오는 일치하는 <audio> 요소에서 동일한 클립 범위와 타이밍을 따릅니다. /hyperframes-core가 이 시간적 편집을 담당합니다. /hyperframes-keyframes는 내부 래퍼에서 확대/축소, 펀치, 팬, 자르기, 마스크 또는 clip-path와 같은 시각적 속성 애니메이션에만 사용하세요. ../hyperframes-core/references/creator-editing-recipes.md에서 전체 계약을 복사하세요.

협업 흐름(Companion flow)

flow: companion인 경우:

  • BRIEF.md를 읽고 승인된 ## Assets 및 ## Customizations을 프로젝트 아티팩트와 조정하세요. 승인되었지만 아직 완료되지 않은 작업을 완료하세요. 완료된 작업은 그대로 두세요. 승인된 기능을 새 것처럼 다시 제안하지 마세요.
  • 계약자가 아닌 감독(director)으로 도착하세요. 협업(companion)을 선택한 사용자는 참여와 품질을 선택한 것입니다. 정직한 응답은 방어할 수 있는 가장 작은 버전이 아니라 설계할 수 있는 최고의 버전입니다. 첫 번째 계획은 최고 수준의 처리(ceiling treatment)입니다: 스토리 아크(가장 가까운 장르 렌즈 — 메뉴 § 장르 렌즈), 디자인 사양, 각 장면의 모션 처리 이름(§ 5의 계획 규율), 전환, 오디오 아이덴티티 — 음악과 사운드 마크, 또는 의도적인 침묵 — 사용자의 자료 배치, 설계된 오프닝과 클로징. 각 레이어가 추가하는 내용을 한 줄로 말하세요. 비용이 많이 드는 것(렌더링 시간, 로그인, 청구)을 표시하면서 이름을 지정하세요. 사용자는 처리를 다듬습니다. 승인을 하나씩 조립해야 해서는 안 됩니다.
  • 최고 수준은 도구 상자가 아닌 개념에 속합니다. 모든 레이어는 브리핑의 메시지를 제공해야 합니다. 어떤 비디오에도 같은 방식으로 적용되는 처리는 장식입니다. 장인 정신은 최고 수준으로 올라갑니다. 콘텐츠는 요청된 것 이상으로 성장하지 않습니다(§ 6).
  • 체크포인트 사이에 ../hyperframes/references/capability-menu.md는 두 가지 방식으로 작동합니다. 트리거 목록으로: 사용자가 입력을 언급하거나 빌드가 필요에 도달할 때 관련 기능을 제공하세요. 각 패스의 업그레이드 채널로: 계획, 스케치 또는 빌드 체크포인트는 사용자가 보고 있는 자료를 가리키는 하나 또는 두 개의 추적된 제안을 전달할 수 있습니다("장면 3의 통계는 카운트업 처리를 원합니다"). 제공하기 전에 읽으세요. 전체 카탈로그를 덤프하지 마세요.
  • 사용자가 기능을 수락하면 해당 아티팩트를 생성하고 일치하는 BRIEF.md 본문 섹션에 즉시 결정을 기록하세요. 사용자가 명시적으로 변경하는 경우에만 머리말 필드를 다시 작성하고 확인된 선호도를 기록하세요.
  • 동일한 스토리보드, 검증, 최종 미리보기 및 렌더링 승인 게이트를 유지하세요. 협업(companion)은 누가 조종하는지 변경할 뿐이며, 어떤 품질이 필요한지는 변경하지 않습니다.

4. 각 단계 전에 필요한 지식 로드

조건이 일치할 때 다음 읽기는 필수입니다:

조건작업 전 읽기
모든 구성 HTML 또는 장면 레이아웃/hyperframes-core; 레이아웃 계약을 위해 references/determinism-rules.md 사용
모든 비자명 생성 또는 시각적 치료/hyperframes-creative → references/house-style.md 및 references/video-composition.md
모든 모션, 애니메이션 또는 장면 전환/hyperframes-animation; 일치하는 규칙, 어댑터, 청사진 또는 전환 참조로 라우팅을 따르세요
storyboard: yes../hyperframes/references/storyboard-format.md 및 ../hyperframes/references/review-loop.md
모든 미디어 자산 또는 작업(내레이션, BGM, SFX, 자막, 그레이딩 또는 변환 포함)/media-use; 프레임워크 재생 및 배치를 위해 /hyperframes-core → references/variables-and-media.md도 읽으세요
멀티 씬 어셈블리../hyperframes/references/production-loop.md
flow: companion, 첫 번째 계획 전/hyperframes-creative → references/story-spine.md 및 references/house-style.md; 가장 가까운 장르 렌즈와 전체 ../hyperframes/references/capability-menu.md — 최고 수준 처리는 여기서 설계되며, 기억에서 불러오지 않습니다
협업 기능 제공, 캡처, 비트 그리드, 생성 비디오, 맵, 게시 또는 교차 워크플로우 기능../hyperframes/references/capability-menu.md
디자인 사양이 존재하고 최종 승인 전/hyperframes-creative → references/design-adherence.md

이러한 읽기를 기억으로 대체하지 마세요. 프로그레시브 공개는 일치하는 참조가 실제로 로드된 경우에만 컨텍스트를 저장합니다.

5. 구성 실행

이 종속성 순서를 사용하세요. 입력이 없는 경우에만 단계를 건너뛰세요.

  1. 계획(Plan). 시청자 아크, 구조, 리듬 및 지속 시간 드라이버를 명시하세요. 짧은 단일 장면에는 하나의 파일을 사용하세요. 세 개 이상의 하드 장면 컷 또는 재사용되는 장면에는 하위 구성을 사용하세요. 내레이션 아크는 /hyperframes-creative → references/story-spine.md, 리듬은 references/beat-direction.md, 구조는 /hyperframes-core → references/composition-patterns.md를 읽으세요. 열린 멀티 씬 브리핑의 경우 /hyperframes-creative → references/prompt-expansion.md를 통해 프롬프트를 확장하세요. 멀티 씬 계획은 각 장면의 형태를 인용합니다: /hyperframes-animation → blueprints-index.md의 청사진 ID(적합한 경우) 또는 rules-index.md에서 구성하는 명명된 규칙(적합한 것이 없을 때) — 모션 이름은 해당 인덱스에서 가져오며, 절대 발명하지 마세요. 스토리 트루스가 어떤 장면이 존재하는지 결정합니다. 인용은 장면을 장식합니다. 명명된 모양을 직접 빌드하기 전에 라이브 카탈로그를 검색하세요: 브리핑이 명명한 모든 모양, 효과, 처리 또는 전환(예: "CRT 스캔라인", "글리치", "필름 그레인", "샤이머 스윕", "컨페티 버스트")에 대해 npx hyperframes catalog --query "<모양 (일반 영어로)>" --json을 실행하고 계획이 해당 모양이 어떻게 빌드되는지 이름을 지정하기 전에 상위 결과를 읽으세요. 이 검색은 설치가 필요 없습니다: 프로젝트, 사전 add, 계정이 없어도 됩니다. 모든 디렉토리에서 호스팅된 전체 레지스트리(~400 블록 및 컴포넌트)를 순위를 매기므로 사용자가 빌드 중에 요청하는 모양에도 적용됩니다. 계획이 명명하는 블록은 3단계에서 설치됩니다. 검색 결과에 맞는 것이 전혀 없을 때만 모양을 직접 작성하세요. 멀티 씬 계획은 디스패치 아티팩트로도 기록됩니다: STORYBOARD.md의 장면당 하나의 ## Frame N 블록 — status: outline, 선언된 src:, 청사진/규칙 인용, 비트 텍스트 — storyboard: no인 경우에도 마찬가지입니다. 블록이 디스패치 단위입니다. 스토리보드 시트는 검토 화면일 뿐입니다.
  2. 요청 시 계획 검토. storyboard: yes의 경우 해당 블록에 대해 공유 검토 루프를 실행하세요. storyboard: no의 경우 계획 일시 중지나 스케치 시트 없이 계속 진행하세요. 계획 일시 중지가 발생하면 해당 일시 중지에 4단계 디스패치를 위해 Codex가 필요한 하위 에이전트 위임 권한을 접어 넣고 나중에 다시 멈추지 마세요.
  3. 종속성 해결. 병렬 작업 전에 레지스트리 블록을 설치하세요. 사용자 자산을 스테이징하고 기존 항목을 채택하세요.

Individual skills in this repo

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

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

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

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

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

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

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

name: embedded-captions

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

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.

관련 스킬