Repolode
Sunwood-ai-labs

Sunwood-ai-labs/hyperframes-motion-reel-skill

짧은 테마를 비트에 맞춘 모션 그래픽 영상으로 만들고 HyperFrames로 MP4 렌더링하는 Claude Code 스킬입니다.

대체할 수 있는 제품:After Effects

스타
143
포크
21
열린 이슈
0
마지막 커밋
21일 전

어떤 프로젝트인가요?

이 저장소는 에이전트가 모션 디자이너이자 크리에이티브 코더로 작업하도록 안내하는 Claude Code 스킬입니다. 짧은 테마와 선택적으로 제공되는 이미지나 보이스 트랙을 바탕으로 세계관, 카피, 디자인 시스템, 비트별 타임라인을 기획한 다음 HTML, GSAP, SVG, Canvas로 장면을 만듭니다.

타이밍은 120 BPM, 60 FPS 그리드에 고정되며, 한 비트는 0.5초 또는 30프레임입니다. 배경 음악은 Node.js 내장 기능만으로 WAV 파일로 생성하며, 영상과 동일한 비트 테이블을 기준으로 합니다. Canvas와 SVG 레이어는 순수 함수인 render(t)를 사용해 결정론적으로 시크할 수 있습니다.

이 스킬은 린트, 검사, 스냅샷 검토, 렌더링을 반복해 검증한 뒤 ffprobe와 ffmpeg로 최종 MP4를 표본 검사합니다. Apache-2.0 라이선스의 HyperFrames와 GSAP를 기반으로 remotion-motion-reel을 포팅했으므로 Remotion의 상용 라이선스가 필요하지 않습니다.

핵심 기능

  • 01120 BPM / 60 FPS 그리드에 맞춘 비트 고정 타이밍으로, 컷을 비트 번호로 지정합니다.
  • 02Node.js 내장 기능만으로 WAV 사운드트랙을 생성하고 동일한 비트 테이블에 동기화합니다.
  • 03일시 정지된 GSAP 타임라인과 Canvas 및 SVG용 시크 가능한 render(t) 함수로 구성된 2계층 애니메이션입니다.
  • 04장면 사이를 크로스페이드하는 대신 도형을 변형합니다.
  • 05시드가 지정된 PRNG를 사용하고 Date.now()나 Math.random()을 쓰지 않아 결과를 결정론적으로 생성합니다.
  • 06제출 전에 린트, 검사, 스냅샷, ffmpeg 검증을 수행합니다.

활용 사례

  • 한 줄짜리 콘셉트로 짧은 쇼릴이나 모션 티저 만들기.
  • 16:9, 9:16 또는 1:1 형식의 제품 출시 영상 제작하기.
  • 설정한 BPM에 맞춰 영상이 움직이는 음악 기반 모션 그래픽 만들기.
  • 유료 모션 라이브러리 라이선스 없이 상업적으로 활용하기 좋은 영상 콘텐츠 생성하기.

빠른 시작

  1. 1

    저장소를 Claude Code의 skills 폴더에 clone하여 skill을 설치합니다

    git clone https://github.com/Sunwood-ai-labs/hyperframes-motion-reel-skill ~/.claude/skills/hyperframes-motion-reel
  2. 2

    npx가 포함된 Node.js(현재 LTS), Google Chrome, ffmpeg/ffprobe를 PATH에서 사용할 수 있는지 확인합니다

  3. 3

    Claude Code에서 짧은 테마를 지정해 skill을 실행합니다

    /hyperframes-motion-reel Neon Tokyo night drive, 20 seconds, BPM 128

사용 전 알아둘 점

  • Claude Code와 별도로 설치한 HyperFrames 도메인 skill이 필요합니다.
  • 렌더링 및 검증을 위해 Google Chrome과 ffmpeg/ffprobe를 PATH에서 사용할 수 있어야 합니다.

토픽

자주 묻는 질문

hyperframes-motion-reel-skill은(는) 무엇인가요?
짧은 테마를 비트에 맞춘 모션 그래픽 영상으로 만들고 HyperFrames로 MP4 렌더링하는 Claude Code 스킬입니다. 이 저장소는 에이전트가 모션 디자이너이자 크리에이티브 코더로 작업하도록 안내하는 Claude Code 스킬입니다. 짧은 테마와 선택적으로 제공되는 이미지나 보이스 트랙을 바탕으로 세계관, 카피, 디자인 시스템, 비트별 타임라인을 기획한 다음 HTML, GSAP, SVG, Canvas로 장면을 만듭니다.
hyperframes-motion-reel-skill은(는) 무료로 사용할 수 있나요? 라이선스는 무엇인가요?
hyperframes-motion-reel-skill은(는) MIT 라이선스의 오픈소스입니다. 상업용 제품에 사용하기 전에 라이선스 조건을 확인하세요.
hyperframes-motion-reel-skill은(는) 아직 유지보수되고 있나요?
활발히 유지보수 중. hyperframes-motion-reel-skill의 마지막 커밋은 2026년 9월 29일입니다.
hyperframes-motion-reel-skill은(는) 어디에 사용할 수 있나요?
한 줄짜리 콘셉트로 짧은 쇼릴이나 모션 티저 만들기. 16:9, 9:16 또는 1:1 형식의 제품 출시 영상 제작하기. 설정한 BPM에 맞춰 영상이 움직이는 음악 기반 모션 그래픽 만들기. 유료 모션 라이브러리 라이선스 없이 상업적으로 활용하기 좋은 영상 콘텐츠 생성하기.
hyperframes-motion-reel-skill는 어떻게 설치하나요?
저장소를 Claude Code의 skills 폴더에 clone하여 skill을 설치합니다: git clone https://github.com/Sunwood-ai-labs/hyperframes-motion-reel-skill ~/.claude/skills/hyperframes-motion-reel npx가 포함된 Node.js(현재 LTS), Google Chrome, ffmpeg/ffprobe를 PATH에서 사용할 수 있는지 확인합니다 Claude Code에서 짧은 테마를 지정해 skill을 실행합니다: /hyperframes-motion-reel Neon Tokyo night drive, 20 seconds, BPM 128
hyperframes-motion-reel-skill은(는) 어디서 받을 수 있나요?
소스 코드와 설치 방법은 GitHub에 있습니다: https://github.com/Sunwood-ai-labs/hyperframes-motion-reel-skill

요약은 프로젝트 README를 바탕으로 AI가 작성했습니다. GitHub 통계는 매일 갱신됩니다.

관련 프로젝트