Motion Craft Kit
출처: github.com/iart-ai/motion-skills — 14개의 오픈소스 팩, 51개 스킬, MIT 라이선스. 이 문서는 단일 통합 참조 자료입니다. 원본 14개 팩은
npx skills add iart-ai/<팩-이름>또는 Claude Code 플러그인으로 개별 설치할 수 있습니다. 이 스킬은 전체 영역을 한 곳에서 볼 수 있도록 종합적으로 다룹니다.
정보
| 저장소 | iart-ai/motion-skills (업스트림, MIT) |
| 통합자 | V4TIME — V4SKILL |
| 정의 | AI 코딩 에이전트를 위한 51개의 모션 그래픽/애니메이션/비디오 스킬, 재구성됨 |
| 형식 | 참조 스킬 — 핸드북처럼 읽히는 단일 SKILL.md |
| 원본 팩 설치 | npx skills add iart-ai/tiktok-video-skills 등 |
| 사용 시점 | 모션 그래픽, 애니메이션, 비디오 제작, 웹 모션, 데이터 시각화, 3D/WebGL, 수학 애니메이션 또는 프리랜서 모션 비즈니스 관련 요청 시 |
주요 테마
AI 코딩 에이전트가 모션 그래픽, 애니메이션, 비디오를 전체 파이프라인에서 제작하도록 가르칩니다. — 훅 기반 TikTok 클립부터 WebGL 셰이더 배경, 내레이션 설명 영화부터 브랜드 모션 시스템 문서까지. 이 컬렉션은 각각 설치 가능한 팩이 있는 14개 도메인을 다루며, 각 스킬은 하나의 워크플로우를 가르치는 자체 포함된 SKILL.md + references/ 폴더로 구성된 공통 구조를 공유합니다. 시각적 결과물을 생성하는 스킬에는 전달 및 검증 루프와 소형 scripts/ 툴킷이 포함됩니다.
중심 사상: 모션은 마법이 아닌 장인 정신입니다. 모든 팩은 실제 프로덕션 기법(타이밍/이징 원칙, 프레임 정확한 컷, 비트 동기화, 60fps 규율, 플랫폼 사양, 접근성)에 기반하며, 단순히 "애니메이션을 만드는 것" 이상을 추구합니다.
주요 키 테마
-
숏폼 세로 비디오는 독특한 문법입니다. 훅, 패턴 인터럽트, 페이싱, 유지율 편집, 단어 타이밍 캡션, 하단 써드, 카운트다운 타이머 — 9:16은 단순히 "비디오를 옆으로 돌린 것"이 아닌 고유한 언어입니다.
-
데이터가 모션을 주도합니다. 차트 레이스, 카운트업 티커, 애니메이션 인포그래픽, Wrapped 스타일 리캡, CSV에서 배치 생성된 광고 크리에이티브 — 모션은 숫자의 함수이며, 모든 프레임이 정확하게 렌더링됩니다.
-
키네틱 타이포그래피는 텍스트가 모션 그 자체입니다. 문자/단어/줄 지연, 분할 텍스트 나타내기, 가변 폰트 웨이트 전환, 경로 위 텍스트, 가사/타이틀 카드 — 텍스트는 고정되지 않고 연기합니다.
-
웹 모션은 60fps와 접근성에 달려 있습니다.
transform/opacity만 애니메이션하고, 레이아웃 스래싱을 제거하며,prefers-reduced-motion을 계층적 저하로 존중하고, Next.js App Router에서 페이지 전환, 마이크로 인터랙션, SVG 스트로크 그리기, Lottie 재생을 수행합니다. -
3D/WebGL은 별도 트랙입니다. GLSL 프래그먼트 셰이더, Three.js/R3F 장면, 파티클 시스템 — GPU 바운드이며 메모리 누수에 주의하고, 전체 제품이 아닌 배경 및 효과로 배포됩니다.
-
수학 애니메이션은 고유한 기술입니다. Manim CE — 장면, Mobject, LaTeX 변환, ValueTracker, 3D 이동 카메라 — 3Blue1Brown 스타일 교육 비디오 및 방정식 시각화에 사용됩니다.
-
편집 지도 애니메이션은 지리를 스토리텔링으로 전환합니다. 카메라 줌, 경로 그리기, 핀 드롭, 지역 강조, 12fps 스터터 — Vox 스타일로 Google Earth Studio 또는 GeoJSON/SVG에서 구현됩니다.
-
브랜드 모션은 시스템이지 일회성이 아닙니다. 이징/타이밍 토큰, 모션 라이브러리, 로고 규칙, 접근성 표준 — 한 번 작성되어 모든 곳에서 참조됩니다.
-
프리랜서 모션은 비즈니스입니다. 브리프, 가격 책정, 수정 제한, 납품 사양, 브랜드 모션 가이드라인 — 모션 디자이너나 스튜디오의 운영을 뒷받침합니다.
-
모든 시각적 스킬에는 검증 루프가 포함됩니다. 프레임 정지, 콘택트 시트 배열, 인코딩된 MP4 검사 — 에이전트가 반환하기 전에 자체 출력을 확인합니다. 웹 스킬은 독립형 HTML을 렌더링하고, 비디오 스킬은 Remotion 또는 Manim을 통해 렌더링합니다.
51개 스킬 — 통합, 재정렬, 재작성
워크플로우별로 구성되었으며, 원본 팩 순서가 아닙니다. 순서가 변경되었습니다. 약 절반의 설명은 처음부터 다시 작성되었고, 나머지는 원본 README 설명에서 요약했습니다.
A. 숏폼 세로 비디오 (TikTok / Reels / Shorts)
1. short-form-video
기능: 세로 9:16 비디오의 구조적 문법 — 스와이프에서 살아남는 훅, 주의를 재설정하는 패턴 인터럽트, 유지율을 유지하는 페이싱, 재스킨 가능한 반복 가능한 템플릿 구조. 처음 3초 문제를 막연한 느낌이 아닌 디자인 제약 조건으로 가르칩니다.
활성화 시점: Reel/TikTok/Shorts 제작, 재사용 가능한 숏폼 템플릿 구축, 유지율 편집, 약한 오프너 수정, 페이싱 강화, 매끄러운 루프 제작.
2. caption-animation
기능: 대본 또는 음성 해설에서 단어 타이밍이 맞춰진 노래방 스타일 캡션 — 단어별 팝 타이밍, 활성 단어 강조, 캡션이 플랫폼 UI와 충돌하지 않도록 안전 영역 배치. 캡션을 영상에 합성하거나 다른 렌더러에 공급할 타이밍 단어 배열을 제공합니다.
활성화 시점: 음성 해설을 Hormozi 스타일 단어별 캡션으로 변환, 클립에 자막 내장, Reel에 애니메이션 캡션 추가.
3. countdown-video
기능: 프레임 정확하고 드리프트 없는 카운트다운 타이머 — 숫자 뒤집기/롤링 모션 및 구성 가능한 지속 시간 — "곧 시작" 화면, 출시/세일 카운트다운, 정확한 프레임에 0으로 종료되는 애니메이션 카운터. 대부분의 단순한 타이머 구현을 망가뜨리는 드리프트 문제를 해결했습니다.
활성화 시점: 카운트다운 타이머, "곧 시작" 화면, 출시 카운트다운, 0으로 끝나야 하는 애니메이션 카운터 구축.
4. lower-thirds
기능: 단계별 진입/퇴장 애니메이션이 있는 깔끔하고 브랜드화된 이름/역할 하단 써드 — 템플릿화되어 다른 이름으로 동일한 모양을 여러 사람에게 적용 가능. 안전 영역 배치 및 브랜드 잠금(색상, 서체, 로고 배치) 포함.
활성화 시점: 애니메이션 하단 써드, 이름표, 스피커 오버레이, 여러 사람에 대한 방송 스타일 타이틀 생성.
5. text-message-animation
기능: 채팅 대화 애니메이션 — 버블이 하나씩 나타나고, 입력 표시기가 깜빡이며, 사운드가 비트에 맞춰 전송되고, 스레드가 자동 스크롤됨 — iMessage/WhatsApp/SMS 미학에 걸쳐 메시지 배열 또는 CSV에서 렌더링되어 하나의 템플릿으로 무한한 비디오 제작.
활성화 시점: 가짜 문자 메시지 비디오, iMessage 스토리, WhatsApp/SMS 대화 클립, 채팅 응답 애니메이션 제작, CSV에서 문자 메시지 비디오 배치 생성.
B. 팟캐스트 / YouTube / 장편
6. audiogram
기능: 팟캐스트 클립, 음성 해설 또는 인용문을 Reels/TikTok/Shorts/피드 게시물에 맞는 자막이 있는 웨이브폼 비디오로 변환 — 반응형 웨이브폼, 선택적 진행 표시줄, 캡션, 정사각형 또는 세로 출력. 오디오 기반 시각적 스레드가 제품이지 장식이 아닙니다.
활성화 시점: 오디오그램 제작, 팟캐스트를 비디오로 변환, 음성 해설에 웨이브폼 추가, 팟캐스트 인용문을 소셜 미디어로 내보내기.
7. youtube-intro-outro
기능: YouTube의 클릭 가능한 요소 영역(구독 버튼, 다음 비디오 카드 등)을 사후 고려가 아닌 디자인 제약 조건으로 존중하는 3~5초 브랜드 인트로 스팅 및 20초 엔드스크린 아웃트로 구축. 채널별로 이름/로고/색상/스팅만 변경되는 재사용 가능한 템플릿.
활성화 시점: YouTube 인트로, 채널 범퍼, 로고 스팅, 아웃트로, 엔드 스크린, 구독/다음 비디오 영역이 있는 엔드 카드 제작.
C. 이커머스 / 제품
8. product-demo-video
기능: 정적 제품/앱 스크린샷을 정교한 애니메이션 데모로 변환 — 기기 프레임, 합성 커서 + 클릭, 영역 확대, 기능 캡션 — 화면 녹화기 없이 평면 스크린샷이 워크스루가 됩니다. 시청자가 보는 내용과 시점을 프레임별로 제어할 수 있습니다.
활성화 시점: 제품 데모, 앱/SaaS 워크스루, 스크린샷 기반 기능 발표 비디오 제작, 각 화면을 브라우저 창에 프레이밍.
9. promo-video
기능: 강력한 6~15초 세일 스팟 — 할인 공개, 원가→할인가 취소선, 프로모션 코드, 카운트다운, CTA — 데이터 테이블에서 여러 제품에 걸쳐 배치되어 하나의 템플릿이 데이터에서 가격을 가져와 N개의 프로모션을 렌더링. 볼륨이 중요한 블랙 프라이데이/플래시 세일에 최적화.
활성화 시점: 세일/프로모션/할인 공개/블랙 프라이데이/플래시 세일 비디오 생성, CSV에서 오퍼 배치.
10. photo-slideshow
기능: 사진 폴더를 완성된 비디오로 변환 — 사진별 Ken Burns 모션, 비트 동기화된 전환, 혼합 종횡비 처리, 상단 캡션. 사진이 단순히 잘리는 것이 아니라 의도를 가지고 움직입니다.
활성화 시점: 사진을 슬라이드쇼/몽타주/리캡 비디오로 전환, 음악에 맞춰 Ken Burns 모션 동기화.
D. 광고 / 마케팅
11. ad-creative-video
기능: 하나의 데이터 기반 광고 템플릿 × CSV = N개의 메시지 일치 변형, A/B 테스트를 위해 모든 배치 종횡비(9:16, 4:5, 1:1, 16:9)로 내보내기. 크리에이티브는 매개변수화되어 훅, 본문, CTA, 오퍼가 모두 데이터 행에서 제공됩니다.
활성화 시점: 비디오 광고 제작, A/B 테스트를 위한 데이터 테이블에서 광고 변형 배치 생성, 하나의 광고를 Meta/TikTok/Reels/YouTube용 여러 종횡비로 내보내기.
12. launch-video
기능: 고에너지 제품 출시 / 홍보 영화 — 훅 → 티저 → 공개 → 기능 몽타주 → 엔드카드 CTA, 비트에 맞춰 편집. 구조는 템플릿이고, 에너지는 조정하는 변수입니다.
활성화 시점: 30초 제품 출시 비디오, 홍보 릴, 비트 동기화 공개, 엔드카드 CTA 영화 구축.
13. testimonial-video
기능: 애니메이션 인용문/리뷰 클립 — 지연된 줄 나타내기, 핵심 구문 강조, 분할 별점, 작성자 블록 — 고객 리뷰 목록을 각각 브랜드 잠금된 소셜 프루프 비디오로 변환.
활성화 시점: 고객 리뷰를 애니메이션 증언 클립으로 변환, 별점이 있는 인용문 비디오, 리뷰 목록에서 소셜 프루프 비디오 생성.
E. 설명 / 교육
14. explainer-video
기능: 하나의 메시지를 페이스가 있는 30~90초 내레이션 숏으로 변환 — 대본 → 스토리보드 → 장면 구성 → 내레이션/캡션 동기화 → 편집 → 다듬기. 렌더링 단계뿐만 아니라 전체 파이프라인을 다룹니다. 대부분의 모션 도구가 건너뛰는 대본-화면 간격을 처리합니다.
활성화 시점: 설명 영화, 작동 방식, 온보딩 또는 컨셉 비디오 제작; 기능을 내레이션된 작동 방식 클립으로 변환.
15. wrapped-video
기능: "Spotify Wrapped" 스타일 리캡 구축 — 하나의 템플릿 × 데이터 테이블 → 각 행에서 데이터가 채워진 많은 개인화된 9:16 비디오. 템플릿은 고정되고 데이터는 사용자마다 다릅니다.
활성화 시점: 사용자 CSV에서 Spotify Wrapped 스타일 연간 리뷰 비디오, 사용자별 통계 비디오 구축.
16. diagram-animation (재작성)
기능: 다이어그램과 차트를 한 번에 표시하는 대신 시간에 따라 점진적으로 공개 — 점진적 노드/에지 공개, 스스로 그려지는 흐름 커넥터, 올라가는 성장 막대, 틱하는 카운트업. 시청자는 갑자기 존재하는 정적 이미지가 아니라 구축되는 다이어그램을 읽습니다. 아키텍처 다이어그램, 순서도 및 데이터 차트를 동일한 방식(단계적 공개)으로 처리합니다.
활성화 시점: 다이어그램, 순서도, 아키텍처 또는 차트를 단계별로 애니메이션; 노드별 공개; 막대 성장 및 숫자 카운트업.
17. whiteboard-animation (재작성)
기능: "VideoScribe" 스타일 그리기 설명 영화 — 손이 보드 위에 그림과 손글씨를 획별로 스케치하며 내레이션에 맞춰 페이스 조절. 공개 자체가 모션이고, 손은 장치입니다. 좋은 콘텐츠를 대체하는 것이 아니라 기본 일러스트레이션이 펼쳐지는 수업처럼 느껴지게 하는 전달 메커니즘입니다.
활성화 시점: 화이트보드 스타일 설명 영화, 그리기 애니메이션, 내레이션에 맞춰 손으로 스케치한 일러스트레이션 제작.
18. isometric-animation (재작성)
기능: 등각투영 / 2.5D 장면 — 쌓인 레이어, 돌출 블록, 분해 다이어그램, 지연 공개 및 카메라 드리프트가 있는 등각투영 그리드. 평평한 다이어그램에 본격 3D 없이 3차원을 부여합니다. 카메라는 드리프트하고, 레이어는 분리되며, WebGL 파이프라인 없이 깊이 단서를 제공합니다.
활성화 시점: 등각투영/2.5D 장면, 쌓인 레이어 다이어그램, 분해도, 지연 공개 및 카메라 드리프트가 있는 등각투영 그리드 구축.
19. manim (재작성)
기능: Manim Community Edition을 사용하여 Python으로 수학/물리학/컴퓨터 과학 애니메이션 구축 — 장면 및 Mobject, 애니메이션 기본 요소, LaTeX/MathTex 방정식 변환, 그래프 및 업데이터(ValueTracker), 3D 및 이동 카메라, CLI를 통한 MP4/GIF 렌더링(먼저 프레임을 렌더링하는 검증 루프 포함). 3Blue1Brown 툴체인을 장면 코드를 작성할 수 있는 에이전트가 사용할 수 있도록 제공합니다.
활성화 시점: 수학 애니메이션 제작, 방정식 애니메이션, Manim 사용, 3Blue1Brown 스타일 비디오 제작, 함수 플로팅 및 애니메이션, 하나의 공식을 다른 공식으로 변환, 궤도 카메라로 3D 표면 렌더링.
F. 키네틱 타이포그래피
20. kinetic-typography
기능: CSS, GSAP SplitText, Framer Motion 및 Remotion에서 텍스트 애니메이션 — 문자/단어/줄 지연, 분할 텍스트 나타내기, 가변 폰트 웨이트 전환, 경로 위 텍스트, 가사/타이틀 카드. 텍스트는 다른 것 위에 있는 레이블이 아니라 모션의 주제입니다.
활성화 시점: 헤드라인 애니메이션, 키네틱 타이포그래피 비디오 제작, 애니메이션 타이틀 카드 생성, 분할 텍스트 나타내기, 문자/단어/줄별 텍스트 지연, 가사 또는 캡션 비디오 제작, 가변 폰트 웨이트 애니메이션, 텍스트를 경로에 배치.
G. 웹 애니메이션
21. gsap-web
기능: GSAP을 사용한 코드 기반 웹 모션 — 타임라인, ScrollTrigger, SplitText, Flip, Lenis 부드러운 스크롤 동기화. 폐쇄형 플러그인이 아닌 웹 페이지에 연결된 업계 표준 타임라인 도구입니다.
활성화 시점: GSAP으로 웹에서 스크롤 기반, 히어로 또는 텍스트 공개 애니메이션 구축; 스크롤에 따라 타임라인을 스크러빙하는 히어로 섹션 고정.