98.8K+다운로드
사용 가이드로 건너뛰기
hyperframes-animation작성자 HeyGen

HyperFrames Animation 스킬.

모션 및 비디오를 위한 Claude Code 및 Codex 스킬: HyperFrames를 위한 애니메이션 규칙, 장면 블루프린트, 전환 효과 및 런타임 어댑터를 제공합니다.

  • Motion & Video
  • Video
OpenDesign 다운로드사용 가이드 보기
heygen-com/hyperframes · skills/hyperframes-animation/SKILL.mdSKILL.md
--- name: hyperframes-animation description: 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 … --- ## Default: compose atomic rules ## Load a blueprint when ## Routing ## Picking a runtime ## Critical Constraints ## Scripts
2026-09-14에 업스트림 파일에서 읽은 전문 및 섹션 제목 · 전체 7,755자

01 기능

Claude Code와 Codex에서 hyperframes-animation 스킬이 하는 일

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

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

스킬 자체의 표현으로

HyperFrames에 필요한 모든 애니메이션 지식을 제공합니다: 원자적 모션 규칙, 다단계 씬 블루프린트, 씬 전환, 모션 디자인 기법, 그리고 7개의 런타임 어댑터(GSAP 기본값, 그 외 Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). 사용자는 2~4개의 원자적 규칙을 선택해 하나의 일시 정지된 GSAP 타임라인으로 구성하거나, 복잡한 4~5단계 안무를 위해 다단계 블루프린트를 불러오거나, 런타임별 API를 조회할 수 있습니다.

또한 animation-map.mjs를 통한 기존 구성 감사와 24개의 이름이 지정된 텍스트 애니메이션 효과도 다룹니다. GSAP은 타임라인 오케스트레이션, 트랜스폼, 이징, 스태거를 포함하는 모션 작업의 95%에 대해 기본값입니다. 모든 것은 HyperFrames 네이티브입니다: 단일 일시 정지 타임라인, seek-safe, 결정론적입니다.

산출물

  • 데드존, 스태거 일관성, 라이프사이클 경고가 포함된 안무 감사 데이터를 담은 animation-map.json
예시 프롬프트 보기 ↗

작동 방식

  1. 01
    원자적 규칙 선택 및 구성

    rules-index.md에서 2~4개의 규칙을 선택하여 하나의 일시 정지된 GSAP 타임라인으로 결합합니다. 이는 기본 워크플로이며 블루프린트에서 시작하는 것보다 빠릅니다.

  2. 02
    다단계 씬을 위한 블루프린트 불러오기

    씬이 brand-reveal이나 social-proof 같은 기존 사전 설계 템플릿과 일치할 경우, blueprints-index.md에서 해당 레시피를 불러와 그 단계 파이프라인을 재사용합니다.

  3. 03
    런타임별 API 조회

    라우팅 테이블을 사용하여 GSAP 이즈와 타임라인 제어, Lottie 플레이어 메서드, Three.js 믹서 API 또는 필요한 기타 런타임별 문서를 찾습니다.

  4. 04
    animation-map으로 안무 감사하기

    animation-map.mjs를 실행하여 모든 GSAP 타임라인을 읽고, 트윈을 열거하고, bbox를 샘플링하고, 플래그를 계산하며, 데드존과 스태거 일관성을 감사하기 위한 animation-map.json을 출력합니다.

02 적합성 확인

hyperframes-animation 스킬 사용 시점

Claude Code 또는 Codex에서 이러한 종류의 모션 및 비디오 작업을 수행할 때 hyperframes-animation 스킬을 사용합니다. 적합성과 제한 사항은 스킬 자체 파일에서 가져온 것입니다.

적합한 경우

  • rules-index.md에서 트리거나 태그로 선택된 원자적 모션 패턴
  • 두 클립 간 CSS 기반 씬 전환
  • Three.js를 사용한 3D 씬, 카메라 모션, 셰이더 기반 시각 효과
  • TypeGPU를 사용한 파티클, 리퀴드 글라스 또는 커스텀 셰이더가 있는 GPU 렌더링 캔버스

한계 인지하기

  • 레이아웃 변경을 위해 width, height, top, left를 애니메이션 처리

제공할 사항

  • 구성 디렉터리animation-map.mjs 실행 시 안무를 감사할 구성 디렉터리 경로를 제공합니다.
  • 블루프린트 ID씬이 다단계 템플릿과 일치할 경우, blueprints-index.md에서 블루프린트 ID를 제공하여 전체 레시피를 불러옵니다.

03 스킬 내부

hyperframes-animation 스킬이 Claude Code와 Codex에 제공하는 규칙

SKILL.md가 에이전트를 위해 설정하는 7가지 구체적 지침, 기본값, 한도 — 결과를 바꾸는 파일의 부분

  1. 레이아웃 상수 사전 계산

    트윈 시점에 getBoundingClientRect로 위치를 계산하지 마십시오.

  2. 공간 모션은 GSAP 트랜스폼 별칭만 사용합니다

    모든 공간 모션에는 x, y, scale, rotation을 사용합니다. 레이아웃 변경을 위해 width, height, top, left를 애니메이션하지 마십시오.

  3. GSAP가 기본 런타임입니다

    GSAP는 타임라인 오케스트레이션, 트랜스폼, 이징, 스태거를 포함한 모션 작업의 95%에서 기본으로 사용됩니다. 이 skill의 모든 원자적 규칙은 GSAP 기반입니다.

  4. 기본적으로 원자적 규칙을 조합합니다

    rules-index.md에서 2-4개의 규칙을 선택해 조합하십시오. 이는 blueprint에서 시작하는 것보다 빠르고 코드 양이 적습니다.

  5. 여러 런타임이 공존할 수 있습니다

    하나의 컴포지션에서 여러 런타임이 공존할 수 있습니다. 각각은 런타임별 전역 변수에 인스턴스를 등록하므로 HyperFrames가 한 번에 모두 탐색할 수 있습니다.

  6. blueprint를 추측성으로 읽지 마십시오

    blueprint 파일을 추측성으로 읽지 마십시오. 씬 단위 오케스트레이션이 필요하다고 이미 판단한 경우에만 로드하십시오.

  7. 비공간적 속성은 허용됩니다

    허용 목록은 비공간적 속성 트윈으로 opacity, color, backgroundColor, borderRadius를 허용하지만, 레이아웃 변경을 위한 width, height, top, left는 허용하지 않습니다.

04 활용하기

Claude Code 또는 Codex에 hyperframes-animation 설치

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

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

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

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

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

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

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

Starter prompt
Build a brand-reveal scene for [product name] using the multi-phase blueprint. The hero text should fade in with elastic ease at y:40, followed by a product card sliding up from y:60 with 0.2s stagger between child elements. Add a subtle pulse to the CTA button starting at 2.5s. Use GSAP as the runtime, ensure all spatial motion uses transform aliases (x, y, scale, rotation), and pre-calculate any layout constants at composition setup. Run animation-map.mjs on [composition directory] and output the audit results.

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

첫 번째 결과 확인

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

  • 모든 런타임 인스턴스가 런타임별 전역 객체에 등록되어 있는지 확인하면 HyperFrames가 한 번의 패스로 찾을 수 있습니다

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

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

05 오픈 소스, 추적 가능

출처, 라이선스 및 검증

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

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

SKILL.md 내부

  1. 기본값: 원자적 규칙 조합rules-index.md에서 2-4개의 규칙을 선택해 GSAP 타임라인으로 조합하면 blueprint보다 빠릅니다
  2. 다음의 경우 blueprint를 로드하십시오씬이 다단계 템플릿과 일치하거나 실행 가능한 4-5단계 안무가 필요할 때 사용합니다
  3. 라우팅작업을 파일에 매핑하는 표: rules, blueprints, transitions, techniques, adapters, scripts
  4. 런타임 선택GSAP, Lottie, Three.js, Anime.js, CSS, WAAPI, TypeGPU를 언제 사용할지
  5. 중요 제약 조건사전 계산된 레이아웃 상수, GSAP 트랜스폼 별칭만 사용, width/height/top/left 트윈 금지
  6. 스크립트animation-map.mjs를 실행해 안무를 점검하고 animation-map.json을 출력합니다
  7. 참고 항목hyperframes-core, hyperframes-creative, hyperframes-cli 링크
스킬 자체 설명
HyperFrames의 모든 애니메이션 지식 — 원자적 모션 규칙, 다단계 씬 블루프린트, 씬 전환, 광범위한 모션 디자인 기법, 그리고 7가지 런타임 어댑터(GSAP 기본, Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). 모든 모션 또는 애니메이션 작업에 사용합니다: 2-4개의 규칙을 선택하여 구성하거나, 블루프린트를 로드하거나, 런타임별 API를 조회합니다(예: GSAP eases / Lottie player / Three.js mixer). 기존 구성의 안무(애니메이션 맵) 감사 및 24개의 명명된 텍스트 애니메이션 효과도 포함합니다. HyperFrames 네이티브: 단일 일시정지 타임라인, 탐색 안전, 결정론적.

SKILL.md의 전문 설명입니다. 전체 파일은 약 7,755자입니다. GitHub에서 전체 파일 읽기.

HyperFrames Animation

실제 모션 및 비디오 작업에서 hyperframes-animation 실행

OpenDesign을 다운로드하고, SKILL.md 링크에서 hyperframes-animation을 가져오고, 위 프롬프트를 붙여넣은 후 결과 전에 계획을 확인하십시오.

OpenDesign 다운로드모든 스킬 보기
터미널
npx skills add https://github.com/heygen-com/hyperframes --skill hyperframes-animation

OpenDesign 데스크톱

하나의 디자인 시스템으로 모든 결과물에 브랜드 일관성을

완전한 Vibe Design Workspace에서 하나의 브랜드 규칙을 웹사이트, 슬라이드, 인터랙티브 프로토타입, 대시보드, 이미지, HTML 영상에 적용하세요. 로컬 Codex, Claude Code, Cursor 등을 연결해 무료로 제작할 수 있습니다.

  • 웹, 슬라이드, 프로토타입, 대시보드, 이미지, 영상
  • 140개+ 디자인 시스템과 전체 템플릿·스킬 라이브러리
  • 로컬 Codex 및 21개+ 코딩 에이전트 연결 · 무료
무료 다운로드

macOS, Windows 지원