Communitygithub.com

heygen-com/hyperframes

HyperFrames 프로젝트의 모든 미디어 요구를 단일 스킬로 처리하는 Agent Media OS입니다. BGM, SFX, 이미지, 아이콘, 브랜드 로고, 음성, 컬러 그레이드, LUT를 로컬 파일 또는 붙여넣기 가능한 블록+원장 기록으로 해결하고(단일 동사 `resolve`), 카탈로그에 없는 경우 TTS/음악/이미지 모델로 생성하며, 공유 오디오 엔진을 통해 음성 해설, 자막, 배경 제거를 제공하고, 미디어를 편집/프레임 변환/변형하며, 여러 프로젝트에서 에셋을 재사용합니다. 또한 실제 영상이 어둡거나, 평범하거나, 지루하거나, 레트로/캠코더/프린트/ASCII 느낌이 필요하거나, 개인정보 보호가 필요하거나, 미디어 공개가 필요한 모호한 피드백에도 사용됩니다.

hyperframes란 무엇인가요?

HyperFrames의 에이전트 미디어 OS인 `media-use` 스킬입니다. 이 스킬은 단일 동사 `resolve`를 통해 BGM, SFX, 이미지, 아이콘, 로고, 음성(TTS), 컬러 그레이드, LUT 등 모든 미디어 유형을 카탈로그에서 검색하고 로컬 파일로 해결합니다. 카탈로그에 없는 미디어는 TTS/음악/이미지 생성 모델을 통해 생성할 수 있습니다. 공유 오디오 엔진을 통해 음성 해설, 자막, 배경 제거를 원스톱으로 처리하며, 미디어 컷/프레임 변환/변형과 같은 후처리 작업도 지원합니다. 주요 특징으로는 사진/비디오의 시각적 문제(어두움, 평범함 등)를 'Media Treatments' 레퍼런스를 통해 분석하고, 한 번의 점진적인 워크플로우로 보정/스타일링/프라이버시 보호/효과 적용을 제안합니다. 또한 프로젝트당 한 번만 제안하는 '기회 패스'를 통해 사용자 경험을 향상시키며, Claude Code, Cursor, Codex 등의 AI 에이전트 환경에서 npx 명령어로 즉시 사용 가능합니다.

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

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

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

문서

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

media-use

HyperFrames용 미디어 OS: 해결 · 생성 · 조작 · 기억 — 모든 미디어 유형, 하나의 스킬, 컨텍스트 노이즈 제로.

첫 실행: heygen CLI를 설치하고 로그인(무료 사용 경로)한 후 npx hyperframes media-use resolve --doctor로 확인하세요. 설정 및 공급자: references/setup-providers.md.

Resolve — 유일한 동사

npx hyperframes media-use resolve --type <type> --intent "<description>" --project <dir>

한 줄을 반환합니다: resolved <id> → <path> (<type>, <metadata>). 모든 검색 노이즈는 디스크에 남습니다.

Type한 줄 설명
bgm배경 음악 (HeyGen 카탈로그, 10,000개 이상 트랙)
sfx음향 효과 (번들 19개 파일 라이브러리 + 카탈로그)
image사진, 배경 (HeyGen 에셋 검색, 75,000개 이상 벡터)
icon아이콘, 기호 (투명)
logo공식 브랜드 마크 (theSVG → GitHub 아바타 → 파비콘; 절대 다시 그리지 않음)
voiceTTS 음성 해설 (HeyGen 무료 사용 경로; 선택적 로컬 Kokoro)
grade측정된 보정 후보; 광범위한 광택/스타일화는 Media Treatments 참조
lut사용자 제공 또는 명시적으로 선택된 재사용 가능하고 검증된 .cube 파일

새로 resolve하기 전에 --candidates로 재사용 가능한 후보를 나열하고 직접 적합성을 판단하세요 — 재사용 규칙, 모든 플래그, 수집(--from), 채택은 references/resolve.md에 있습니다.

광범위한 시각적 피드백을 미디어 의도로 처리

사용자가 명시적으로 사진 미디어를 수정, 광택, 스타일화, 난독화, 강조 또는 공개하도록 요청하면, 컬러 그레이딩이나 효과를 언급하지 않더라도 references/media-treatments.md를 읽으세요. 실제 <img>/<video>를 검사하고, 하나의 기본 의도를 선택한 후, 결정론적 지속성과 검증을 사용하세요. 일치하는 레시피를 선택적 테스트 시드로 사용하거나 hyperframes media-treatment --capabilities --json을 검사한 후 관련 패밀리/효과를 --capability <id>로 요청하고 표준 컨트롤에서 사용자 정의 처리를 조립하세요. 일반적인 저작에는 --all을 로드하지 마십시오. 처리는 보정, 프리셋, 마무리, 호환 가능한 셰이더 효과, 지원되는 키프레임 및 선택적 Registry 오버레이를 구성할 수 있습니다. 결과를 더 정교하게 보이게 하기 위한 효과가 아닌, 출처가 정당화된 경계 조정 및 호환 가능한 부분만 추가하세요. 최종 결합된 페이로드를 hyperframes media-treatment로 지속시키세요.

하나의 점진적으로 확대되는 워크플로우를 사용하세요. 비디오의 경우 프레임을 개별적으로 읽지 말고 레이블이 지정된 초기/중간/후반 접촉 시트 하나를 검사하세요. 일반적인 보정 또는 광택을 위해 한 후보를 적용하고 사후 시트 하나를 검사하세요. 결과가 모호하거나, 시간적이거나, 스타일화되었거나, LUT 기반이거나, HDR/LOG에 민감하거나, 개인적이거나, 브랜드에 중요한 경우에만 개별 프레임 또는 움직이는 초안 증거로 확대하세요.

일반적인 보정 또는 광택의 경우 최종 처리의 프리셋/조정 JSON을 지속시키세요. 노출, 그림자, 대비 또는 따뜻함을 인코딩하기 위해 .cube LUT를 생성하지 마십시오. 사용자가 LUT를 제공하거나 선택한 처리가 명시적으로 LUT를 소유한 경우에만 LUT를 사용하세요. resolve --type grade --for ... --analyze는 측정 증거일 뿐, 선택한 처리를 생성된 LUT로 대체할 권한이 아닙니다. 지원되는 비네트, 그레인, 블러, 픽셀화, 색상 또는 처리 효과를 CSS/SVG 오버레이로 재현하지 마십시오. 이는 스튜디오 컨트롤과 표준 미리보기/렌더링 셰이더 경로를 우회합니다.

능동적으로 행동하세요 — 미디어 기회 패스 실행

인간은 일반적으로 어떤 미디어가 작품을 향상시킬지 말할 수 없습니다. 당신은 할 수 있습니다. 구성을 만들거나 검토할 때 하나의 근거 있는 스캔을 수행한 후 한 번만 물어보세요 — 자동으로 추가하지 말고, 에셋당 귀찮게 하지 마십시오.

구체적인 신호가 있을 때만 기회를 표면화하세요:

신호 감지제안
화면 속 텍스트 / 음성 해설이 없는 대본TTS 음성 해설 (오디오 엔진)
이모지 또는 아이콘으로 스타일링된 <div>실제 icon resolve하기
자리 표시자, 작거나 업스케일된 것처럼 보이는 이미지더 나은 image (및/또는 업스케일 — references/operations.md 참조)
소리가 없는 하드 씬 컷 / 전환전환 sfx
~10초가 넘고 배경 음악이 없는 조각bgm
과소/과다 노출 또는 색상 캐스트로 읽히는 푸티지교정 그레이드 (hyperframes media-treatment --selector '#hero' --analyze --json으로 검사)
시각적으로 평범하거나 주제에서 벗어난 느낌의 사진 미디어의도된 대상을 명명한 하나의 특정 소스 적합 프리셋 또는 사용자 정의 처리
정적으로 느껴지는 의미 있는 미디어 진입/공개하나의 지원되는 탐색 안전 처리 애니메이션; 요청이 프리셋을 정당화하지 않는 한 색상 유지

이를 도움으로 유지하고 귀찮게 하지 않는 규칙: 근거 있고 일반적이지 않음 (신호 없음 → 제안 없음); 독단적이고 구체적임 (기본값이 선택된 특정 수정 제안 — 인간이 전체 / 일부 / 없음 승인); 프로젝트당 한 번 (하나의 통합된 요청; "그대로 둬" 존중); 표면화하고 절대 자동으로 변경하지 않음 (특히 컬러 그레이드: 제안하고 미리보기 — 회색 세계 "보정"은 의도적인 일몰 또는 네온 룩을 망칩니다).

찾을 위치 — 작업에 필요한 파일만 읽기

작업읽을 파일
resolve / 재사용 / 채택 / 수집, 플래그, 캐스케이드, 인벤토리references/resolve.md
컬러 그레이딩, LUT, 스마트 그레이드 (--for), 그레이드 비교references/grading.md
음성 해설 / TTS, 음악, SFX, 자막, 전사 (오디오 엔진)references/audio.md
기존 미디어 컷 / 프레임 변환 / 변형, 정확한 오차 확산, HEVCreferences/operations.md
소스 인식 크리에이티브 처리, 실시간 효과, 오버레이, 공개references/media-treatments.md
설치 + 인증, 공급자 테이블, RAM 래더, --local-only, --providerreferences/setup-providers.md
저장된 환경설정 + 고정된 레시피 (사용자 메모리)references/memory.md
소유권 매트릭스, 사용 통계, 텔레메트리, 개인정보 (유지 관리자 대상)references/meta.md

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

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

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]

관련 스킬