hyperframes-keyframes작성자 HeyGen

HyperFrames Keyframes 스킬.

모션 및 비디오를 위한 Claude Code 및 Codex 스킬: HyperFrames를 위한 펀치인, 줌, 리프레임, Ken Burns 이동 및 2D/3D 키프레임을 제공합니다.

Motion & Video
Video

heygen-com/hyperframes · skills/hyperframes-keyframes/SKILL.mdSKILL.md

--- name: hyperframes-keyframes description: Use when a HyperFrames composition needs a punch-in, punch-out, zoom, reframe, Ken Burns treatment, camera move, visual match/whip handoff, or other seek-safe 2D/3D keyframes; also for GSAP, CSS keyframes, Anime.js, WAAPI, FLIP, paths, masks, SVG morph/draw, text trails, 3D depth, or `hyperframes keyframes` diagnostics. Don't use for broad scene strategy, brand design, media sourcing, captions, or general video … --- ## Creator editing boundary ## Procedure ## Contract ## Runtime Rules ## GSAP Skeleton ## Keyframe Forms

2026-09-14에 업스트림 파일에서 읽은 전문 및 섹션 제목 · 전체 15,899자

01 기능

Claude Code와 Codex에서 hyperframes-keyframes 스킬이 수행하는 작업

요약, 워크플로, 산출물을 모두 해당 스킬의 SKILL.md에서 그대로 읽어 정리한 내용입니다.

SKILL.md에서2026-09-14 읽음 · 실행 기록 아님

스킬 자체의 표현으로

HyperFrames 컴포지션을 위한 펀치인, 펀치아웃, 줌, 리프레임, 켄 번즈 이동, 카메라 이동, 비주얼 매치/휘프 핸드오프, 시크 안전 2D/3D 키프레임을 처리합니다. GSAP, CSS 키프레임, Anime.js, WAAPI, FLIP, 패스, 마스크, SVG 모프/드로우, 텍스트 트레일, 3D 뎁스를 지원합니다. 키프레임은 포즈 계약입니다: 가시 상태, 연속적인 대상 아이덴티티, 시크 안전 런타임, 검증된 픽셀.

클립 조립이나 씬 전략이 아니라 클립 내부의 비주얼 모션에 초점을 맞춥니다. 동기적 타임라인 구성, 등록된 타임라인 인스턴스, 결정적 타이밍이 필요합니다. 작성자는 hyperframes lint, check, keyframes 명령, 집중된 --shot 진단, 검증 시점의 스냅샷으로 검증합니다.

산출물

window.__timelines[compositionId]에 paused: true로 등록된 GSAP 타임라인 인스턴스

예시 프롬프트 보기 ↗

작동 방식

01
대상과 상태 식별
키프레임을 작성하기 전에 애니메이션 대상, 가시 상태, 최종 상태, 런타임을 식별합니다.
02
가장 작은 메커니즘 선택
프롬프트를 입증하는 가장 작은 메커니즘을 선택하고, 메커니즘이 불명확할 경우에만 references/keyframe-patterns.md를 참조합니다.
03
작성 및 등록
선언된 런타임에서 시크 안전 키프레임을 작성하며, 동기적으로 구성하고 런타임 인스턴스를 등록합니다.
04
진단으로 검증
hyperframes lint, check, keyframes 명령, 집중된 --shot 하나, 검증 시점의 스냅샷을 사용하여 검증합니다.
05
수정 및 재테스트
입증에 실패하면 소스 키프레임을 수정하고 렌더링 전에 가장 작은 실패 진단을 다시 실행합니다.

02 적합성 확인

hyperframes-keyframes Skill 사용 시기

작업이 이러한 종류의 모션 및 비디오일 때 Claude Code 또는 Codex에서 hyperframes-keyframes skill을 사용하십시오. 아래의 적합성 및 제한 사항은 skill 자체 파일에서 가져온 것입니다.

적합한 경우

클립 내부의 타이밍이 없는 비주얼/크롭 래퍼에서 키프레임된 스케일과 이동을 사용한 펀치인 또는 펀치아웃
하나의 대상 래퍼를 유지하며 여러 상태를 포즈 사다리로 사용하는 부드러운 다중 상태 줌 또는 리프레임
애니메이션된 래퍼 이동과 스케일을 결합한 팬, 리프레임 또는 켄 번즈 카메라 이동
하나의 등록된 시크 안전 타임라인에서 라벨이 지정된 트랜스폼 비트로 연결된 카메라 이동
작성된 기하 구조, 방향, 속도를 보존하는 매치 컷 또는 휘프 팬

한계 인지하기

광범위한 씬 전략, 브랜드 디자인, 미디어 소싱, 캡션 또는 일반적인 영상 기획
소스 범위 하드 컷, 트림, 스플라이스, 재정렬로, hyperframes-core에 속합니다
시간에 따라 변화하는 재생 속도 엔벨로프를 사용하는 소스 스피드 램프로, 지원되지 않습니다
소스 중간의 임의 프리즈 프레임으로, 스틸/파생 세그먼트에 대한 사전 처리가 필요합니다

제공할 사항

보이는 포즈와 최종 상태의도한 모션을 입증하는 데 필요한 포즈이며, 애니메이션을 완성하는 최종 상태를 포함합니다.

03 스킬 내부

hyperframes-keyframes Skill이 Claude Code와 Codex에 부여하는 규칙

SKILL.md가 에이전트에게 설정하는 8가지 구체적인 지시, 기본값, 제한 — 결과를 바꾸는 파일의 부분입니다.

일시 정지된 GSAP 타임라인
GSAP 타임라인은 gsap.timeline({ paused: true })를 사용해야 하며, 렌더링에 중요한 모션에 대해 tl.play()를 호출해서는 안 되고, data-composition-id와 일치하는 키로 window.__timelines[compositionId]에 등록되어야 합니다.
Anime.js Autoplay False
Anime.js 인스턴스는 autoplay: false여야 하며, 유한한 duration과 loops를 가진 채로 window.__hfAnime에 push되어야 합니다.
CSS Keyframes Fill Mode
CSS 키프레임은 유한한 duration과 iteration count, 결정적인 delay, 그리고 animation-fill-mode: both를 요구합니다.
타이머나 랜덤을 절대 사용하지 마십시오
렌더링에 중요한 모션에는 Date.now(), performance.now(), 시드 없는 Math.random(), hover/scroll 트리거, 타이머, 비동기로 생성된 타임라인, 등록되지 않은 requestAnimationFrame, 무한 루프를 사용해서는 안 됩니다.
보이는 채널만 키프레임화
x/y/z, scale, opacity, clip-path, mask 같은 보이는 채널만 키프레임화하고, 숨겨진 헬퍼 상태는 키프레임화하지 마십시오.
객체 정체성 유지
연속성이 중요할 때는 객체 정체성을 유지하십시오. 의도한 모션이 교체나 디졸브일 때만 크로스페이드를 사용하십시오.
최종 프레임은 애니메이션의 일부입니다
최종 프레임은 정리 작업이 아니라 애니메이션의 일부입니다. 요청되지 않은 경우 정지 상태로 리셋하지 마십시오. 요청되지 않은 경우 검은 화면으로 끝내지 마십시오.
주체와 포즈 명명
움직이는 주체와, 최종 상태를 포함하여 의도한 모션을 입증하는 데 필요한 포즈를 명명하십시오.

04 활용하기

Claude Code 또는 Codex에 hyperframes-keyframes 설치

npx skills add 명령 한 번 실행 후, 에이전트에서 첫 번째 작업을 수행하고 결과 체크리스트를 확인합니다.

Claude Code, Codex 또는 사용자의 Agent에 hyperframes-keyframes 추가

프로젝트에서 실행합니다. 설치 프로그램이 어떤 에이전트에 추가할지 묻습니다.

Terminal

npx skills add https://github.com/heygen-com/hyperframes --skill hyperframes-keyframes

skills/hyperframes-keyframes/SKILL.md에 대한 일반적인 skills CLI 형식이며, 저장소가 자체 경로를 문서화할 수도 있습니다.

스킬에 첫 번째 모션 및 비디오 작업 제공

스킬 자체의 용어로 작성되었습니다. 대괄호 부분은 각자의 자료로 교체합니다.

Starter prompt

Add a Ken Burns punch-in to [clip-id] starting at 2.5s: scale from 1.0 to 1.4 over 3 seconds with ease-out, translating the wrapper 15% right and 10% up to reframe on the subject's face. Hold the final framing for 1 second. Register the timeline and verify with a strip shot showing the route.

출처: 스킬 자체의 용어로 SKILL.md에서 작성했습니다.

첫 번째 결과 확인

SKILL.md 자체가 올바른 결과의 모습으로 제시하는 내용:

구조적 문제를 확인하려면 hyperframes lint를 실행하십시오
컴포지션을 검증하려면 hyperframes check을 실행하십시오
--shot 및 --samples와 함께 hyperframes keyframes를 실행하여 타겟, 스톱, 경로, 시간 간격을 검증합니다
--layout strip을 사용하여 인플레이스 모션, 오버랩, 접촉, 미세한 스케일/투명도 변화를 증명합니다
--ghost와 --angle을 사용하여 캔버스, WebGL, 셰이더 모션, 3D 깊이 투영을 증명합니다
첫 프레임, 증명 포즈, 최종 마이너스 홀드, 정확한 최종 프레임에서 스냅샷을 찍어 마스크, 텍스트 가독성, 전체 상태, 블랙/리셋 테일이 없는지 검증합니다

OpenDesign에서 hyperframes-keyframes를 SKILL.md 링크에서 가져옵니다: Plugins → Add → Skill → Import from link, 그런 다음 상단 바에서 선택합니다.

OpenDesign 다운로드 빠른 시작 가이드 읽기

05 오픈 소스, 추적 가능

출처, 라이선스 및 검증

이 페이지의 사실이 어디에서 왔으며 언제 마지막으로 확인되었는지 안내합니다.

Author: HeyGen
Repository: github.com/heygen-com/hyperframes 브랜치 main
스킬 파일: skills/hyperframes-keyframes/SKILL.md 검증 시 기록된 콘텐츠 체크섬; 커밋 558c11b
License: Apache-2.0 LICENSE에서 확인.
리포지토리 스타: 49,761 2026년 9월 14일에 촬영한 전체 heygen-com/hyperframes 저장소의 GitHub 스냅샷으로, 이 카탈로그에는 9개의 스킬이 포함되어 있습니다. hyperframes-keyframes의 평가 또는 사용 횟수가 아닙니다.
OpenDesign에서 검증됨: 2026-09-14 소스 파일, 경로, 라이선스 텍스트 및 스타 수가 확인되었습니다. OpenDesign 메인에 번들로 포함되지 않음(2026-08-28 확인); 이 페이지에 실제 실행 기록이 없습니다.

SKILL.md 내부

제작자 편집 경계Keyframes는 시각적 모션을 담당하고, core는 클립 조립, 트림, 스플라이스, 소스 오프셋, 하드 컷을 담당합니다
절차대상과 상태 식별부터 작성, 검증, 진단 기반 수정까지 5단계 워크플로우
계약대상과 포즈에 이름을 지정하고, 보이는 채널을 키프레임하고, 아이덴티티를 유지하고, 상태를 충분히 오래 유지하고, 최종 프레임을 애니메이션으로 취급합니다
런타임 규칙GSAP 일시정지 타임라인, CSS fill-mode both, Anime autoplay false, 등록 요구사항, 금지된 타이머/랜덤/비동기 패턴
Keyframe 형식배열 keyframes, 퍼센트 keyframes, 속성 배열, 스톱별 이징을 가진 ease-none 부모, 공유된 느낌을 위한 easeEach
채널x/y/scale/opacity와 같은 컴포지터/시각 채널을 선호하고, top/left, width/height, display와 같은 레이아웃/생명주기 채널은 피합니다
메커니즘 선택필요에 가장 작은 메커니즘을 매칭하는 표: FLIP, 경로 이동, 스트로크 드로우, 셰이프 보간, 스태거, 텍스트 세분화, 3D
타이밍예비 동작, 가속, 피크 증명, 팔로우스루, 오버슈트, 이징 선택, 스태거 오프셋, 최종 홀드, 연속적인 속도
텍스트라인 박스, 단어 간격, 가독성, 최종 핏을 유지하고, 글리프나 마스킹된 밴드를 이동하고, 읽을 수 있는 프레임을 스냅샷합니다
SVG스트로크 성장을 위한 DrawSVGPlugin, 셰이프 보간을 위한 MorphSVGPlugin, 프리미티브를 경로로 변환, 복잡한 실루엣 분할
3Dperspective, preserve-3d, z 이동, 회전, 카메라/월드 모션, 오클루전, 레이어 순서를 사용하고, 진단 각도로 깊이를 증명합니다
Canvas / WebGL카메라, 오브젝트 트랜스폼, 머티리얼, 셰이더 유니폼을 keyframe하고, HyperFrames 시간에서 렌더링하고, 증명을 위해 --ghost를 사용합니다

스킬 자체 설명

"HyperFrames 구성에 펀치인, 펀치아웃, 줌, 리프레임, 켄 번스 처리, 카메라 이동, 시각적 매치/휩 핸드오프 또는 기타 시크 안전 2D/3D 키프레임이 필요한 경우 사용합니다. GSAP, CSS 키프레임, Anime.js, WAAPI, FLIP, 패스, 마스크, SVG 모프/드로우, 텍스트 트레일, 3D 깊이 또는 `hyperframes keyframes` 진단에도 사용합니다. 광범위한 장면 전략, 브랜드 디자인, 미디어 소싱, 캡션 또는 일반 비디오 기획에는 사용하지 않습니다."

SKILL.md의 Front-matter 설명입니다. 전체 파일은 약 15,899자입니다. GitHub에서 전체 파일 읽기.

06 설치하기 전에