hyperframes
heygen-com · Apache-2.0 · 별 60,170개HTML을 작성하면 영상이 렌더링됩니다. 탐색 가능한 타임라인, 결정적 프레임, 편집용 스튜디오를 제공합니다. MotionKit이 기반으로 삼는 엔진입니다.
디렉터리 · 2026년 10월 10일 확인
Claude Code와 Codex를 위한 오픈소스 모션 스킬
코딩 에이전트로 영상을 만드는 데 비용을 낼 필요는 없습니다. 알아둘 만한 오픈소스 프로젝트와 각각의 강점, 적용된 라이선스를 소개합니다.
이 프로젝트들은 각 저작자가 독립적으로 운영합니다. MotionKit은 이들과 제휴 관계가 아니며 이들의 코드를 포함하지 않습니다. 좋은 프로젝트라서 링크를 걸어 두었습니다. 별 개수와 라이선스는 2026년 10월 10일 기준 GitHub 표기이며, 사용하기 전에 저장소에서 직접 확인하세요.
엔진
코드를 영상으로 바꿔 주는 렌더러입니다. 아래 스킬 대부분은 이 중 하나를 기반으로 합니다.
remotion
remotion-dev · Remotion License · 별 63,004개React 컴포넌트로 영상을 만듭니다. 자체 라이선스를 사용하며 개인과 소규모 팀은 무료, 규모가 큰 회사는 유료이므로 상업적으로 쓰기 전에 약관을 확인하세요.
에디토리얼 및 설명 영상 스타일
종이 질감, 컷아웃, 다큐멘터리 같은 호흡이 특징입니다.
vox-explainer-skill
CK42BB · MIT · 별 110개주제 하나로 에디토리얼 스타일의 설명 영상을 만드는 Claude Code 스킬입니다. 스크립트, 키프레임, 애니메이션, 내레이션, 음악까지 제작합니다.
vox-style-animation
Cele-san · MIT · 별 2개에디토리얼 모션 그래픽 스타일을 HyperFrames 스타일 팩으로 만들었습니다. 원하는 스타일을 직접 팩으로 만드는 방법도 담겨 있습니다.
Leslie-vox-style.skill
Ai-Leslie · MIT · 별 0개다큐멘터리 스토리텔링, 에디토리얼 콜라주, 설명 영상 스타일 모션 그래픽을 위한 Codex 스킬입니다.
motion-skill
LunaAI519 · MIT · 별 0개참고 이미지 한 장으로 레트로 스크랩북 스타일의 짧은 영상을 만듭니다. 프레임에는 이미지 및 영상 모델을 사용하며 저작권 자체 점검 기능이 있습니다. 문서는 중국어입니다.
손그림 및 캐릭터 애니메이션
다이어그램을 스케치처럼 보이게 하거나 캐릭터가 연기하게 하고 싶을 때 좋습니다.
ClaudeAnimationBase
JohnHeibel · MIT · 별 1,000개p5.js로 만드는 손그림 카툰 애니메이션 스타터 키트: 31가지 감정을 연기하는 캐릭터와 모델용 가이드가 들어 있습니다.
HandDraw-Skill
ToBeWin · MIT · 별 3개SVG, Remotion, FFmpeg 기반의 결정론적 손그림 영상 엔진: 화이트보드 설명을 획 하나하나 그려 냅니다.
제품·런칭 영상
샷 레시피, 스토리보드, 프로모션 포맷.
video-shotcraft
Vincentwei1021 · Apache-2.0 · 별 11,138개Claude Code와 Codex용 Remotion 기반 시네마틱 제품 영상: 다양한 샷 레시피 카드와 모션 미리보기를 제공합니다.
make-awesome-video
NewTurn2017 · MIT · 별 4개런칭 영상을 위한 연출 워크플로: 레퍼런스 분석, 스토리보드 3종 작성, 스틸 제작, 렌더링, 감독 노트 순으로 진행합니다.
brewreel
Finderchangchang · Apache-2.0 · 별 161개제품 브리프로 세로형 프로모션 영상을 만듭니다. 저비용 모델에서도 작동하도록 설계되었으며, 업종별 레시피와 광고법 검토 기능이 있습니다. 문서는 중국어로 제공됩니다.
html-animation
acelera-agency · MIT · 별 9개프레임 단위로 정확한 애니메이션 로고, 키네틱 타이포그래피, 브랜드 영상을 HTML 파일 하나로 만들고 영상으로 내보냅니다.
원칙과 구성 요소
특정한 스타일이 아니라, 어떤 스타일이든 움직임을 좋게 만들어 주는 지식입니다.
motion-design-skill
LottieFiles · MIT · 별 2,075개AI 에이전트를 위해 쓴 모션 디자인 원칙: 타이밍, 이징, 안무 구성, 그리고 인터페이스에 맞게 적용한 고전 애니메이션 원칙을 다룹니다.
skills
VideoZero · Apache-2.0 · 별 73개Motion Canvas 기반으로 다이어그램 스타일의 구조화된 영상을 생성하는 스킬 모음입니다.
선택 방법
- 원하는 스타일이 있나요? 에디토리얼이나 손그림 그룹의 스타일 스킬부터 시작해 보세요.
- 제작 기술을 이해하고 싶나요? 먼저 모션 디자인 원칙 스킬을 읽어 보세요. 다른 모든 작업이 좋아집니다.
- 직접 만들고 있나요? 엔진을 고르세요. HyperFrames는 순수 HTML 기반이며 Apache-2.0 라이선스이고, Remotion은 React 기반이며 별도의 라이선스를 따릅니다.
MotionKit의 위치
MotionKit은 HyperFrames 위에 얹어 쓰는 유료 팩입니다. 오픈소스가 기본으로 제공하지 않는 부분에 비용을 내시는 것입니다. 예제가 하나씩 딸린 완성 스타일 24종, 같은 콘텐츠로 만드는 인터랙티브 덱과 PowerPoint, 내레이션 크레딧, 호스팅되는 공유 링크가 포함됩니다. 위의 무료 프로젝트로 충분하다면 그것을 쓰세요.
여기에 소개할 만한 프로젝트를 알고 계신가요? support@motionforclaude.com으로 이메일을 보내 주세요.