하트 리포 팔로우 필수~

하트 리포 팔로우 필수~
Claude Opus 5.5로 모션 그래픽을 만들 때
활용할 수 있는 GitHub 저장소 20개를 모았습니다.
단순히 영상을 생성하는 게 아니라 AI가 애니메이션 코드를 작성하고, 움직임과 카메라를 설계하고,
실제 MP4 영상으로 렌더링하는 방식입니다.
/
Opus 5.5와 Claude Code에서 활용하는 모션 스킬
1. claude-motion — 모션 디자인 규칙, 프레임 자동 검수, 코드 기반 사운드 제작
https://github.com/whaleyxbt/claude-motion
2. claude-motion-design — HTML·Playwright·ffmpeg로 영상 제작. Remotion 없이도 가능
https://github.com/howseen-ai/claude-motion-design
3. motion-graphics-skills — 제품 출시 영상과 애니메이션 제작을 위한 13개 스킬
https://github.com/charlie947/motion-graphics-skills
4. claude-remotion-skill — 프롬프트 하나로 자막, B-roll, 사운드까지 포함한 영상 편집
https://github.com/haidrrrry/claude-remotion-skill
5. klik-anim-skill-creation — 애니메이션 타이밍, 카메라 움직임, Remotion 제작 원칙
https://github.com/t3knobox/klik-anim-skill-creation
6. hyperframes-motion-reel-skill — 120BPM 비트에 맞춘 60FPS 모션 그래픽 쇼릴
https://github.com/Sunwood-ai-labs/hyperframes-motion-reel-skill
7. product-launch-motion — 보이스오버, 카메라 움직임, 색 보정까지 포함한 제품 출시 영상
https://github.com/AbubakrChan/product-launch-motion
8. animate — Canvas 코드 하나로 짧은 애니메이션 제작. 스토리보드와 스타일 선택까지
https://github.com/cth9191/animate
9. motion-design-skills — 타이밍, 컬러, 타이포그래피, 로고 애니메이션, Remotion 제작 원칙
https://github.com/iart-ai/motion-design-skills
10. hyperframes-student-kit — 영상 편집 스킬과 406개 모션 그래픽 카드, 숏폼 제작 워크플로
https://github.com/nateherkai/hyperframes-student-kit
스킬이 만든 애니메이션을 실제 영상으로 렌더링하는 엔진
11. hyperframes — HTML·CSS·애니메이션 코드를 MP4 영상으로 변환
https://github.com/heygen-com/hyperframes
12. remotion — React 코드로 영상과 애니메이션 제작
https://github.com/remotion-dev/remotion
13. remotion skills — Claude Code·Codex에서 활용하는 공식 Remotion 제작 스킬
https://github.com/remotion-dev/skills
14. GSAP — 정교한 타임라인과 애니메이션 제어
https://github.com/greensock/GSAP
공식 AI 스킬 설치:
npx skills add greensock/gsap-skills
모션 디자인의 완성도를 높이는 도구
15. motion-design-skill — 특정 엔진에 종속되지 않는 모션 원칙, 속도 조절, 자연스러운 움직임 설계
https://github.com/LottieFiles/motion-design-skill
16. awesome-motion-design-agent-skills — AI 에이전트용 모션 디자인 도구와 스킬을 모은 자료
https://github.com/frankxai/awesome-motion-design-agent-skills
17. motion-graphics — 영상과 대본을 바탕으로 말하는 내용에 맞춘 B-roll 모션 그래픽 제작
https://github.com/Barty-Bart/motion-graphics
18. motion-dev-animations-skill — 웹사이트 스크롤, 버튼, 화면 전환 애니메이션. 영상보다는 웹 UI용
https://github.com/199-biotechnologies/motion-dev-animations-skill
19. motion — React·JavaScript를 위한 애니메이션 라이브러리. 이전 Framer Motion
https://github.com/motiondivision/motion
20. lottie-web — After Effects 애니메이션을 웹에서 재생할 때 활용. MP4 영상과는 다른 방식
https://github.com/airbnb/lottie-web
전체 구조는 생각보다 간단합니다.
AI 모델이 코드를 작성하고 → 스킬이 모션·타이밍·카메라를 설계하고 → HyperFrames나 Remotion 같은 엔진이 영상을 렌더링합니다.
영상 생성 AI에 프롬프트를 넣고 결과를 기다리는 방식과는 달라요.
장면의 움직임, 글자, 색상, 전환 효과를 코드로 직접 수정할 수 있다는 게 핵심입니다.
설치 전 각 저장소의 README와 요구사항은 꼭 확인하세요.
이제 AI 영상 제작은 영상을 생성하는 것을 넘어, 코드로 설계하고 반복 수정하는 방향까지 확장되고 있습니다.

출처 · Threads/@vibe.itji