Motionmaxxing: 제품 출시 영상과 브랜드 모션을 만드는 스킬
제품 출시 영상과 브랜드 모션을 스토리보드부터 HTML 애니메이션·MP4 렌더링까지 제작하도록 돕는 에이전트 스킬이에요.
주요 기능
- 브랜드 자료를 확인하고 스토리보드를 만든 뒤 타이포그래피·제품 화면·3D 요소를 조합해요.
- GSAP 기반 모션 런타임과 Chrome·ffmpeg 렌더링을 사용하며 프레임 단위 탐색과 결과 점검 도구를 제공해요.
- 선택적으로 ElevenLabs 음성·효과음·음악과 이미지 생성 표면을 활용해요.
구조
SKILL.md와 references의 제작 지침, runtime의 JavaScript·Three.js 구성, scripts의 렌더·검사 도구로 나뉩니다. 독립 영상 편집 앱이 아니라 코딩 에이전트가 사용하는 작업 묶음이에요.
누구에게 쓸모 있나요
제품 소개 영상·짧은 브랜드 모션을 코드 기반으로 제작하려는 디자이너와 개발자.
설치 전 준비
- Node.js 22 이상, Python 3, ffmpeg, 최근 Chrome 또는 Chromium이 필요해요.
- 스킬을 읽고 파일·명령을 다룰 수 있는 에이전트가 필요해요. 선택 음성 제작에는 ElevenLabs 키, 이미지 생성에는 해당 Codex 기능이 필요해요.
- 로컬 개발 환경
- Chrome/Chromium 헤드리스 렌더링
설치 방법
공식 문서의 설치 예시
공식 README의 Claude 스킬 폴더 설치 예시예요. 설치 스크립트는 사용 전 검토해야 하며 여기서는 실행하지 않았어요.
git clone https://github.com/Tejashmakwana/motionmaxxing ~/.claude/skills/motionmaxxing
bash ~/.claude/skills/motionmaxxing/install.sh사용 방법
- 브랜드·제품 근거와 영상 목적을 전달하고 스토리보드를 먼저 검토해요.
- 짧은 구간·정지 화면으로 구도와 가독성을 검토한 뒤 최종 MP4와 NOTE.md를 확인해요.
비용과 API 키
저장소 이용료와 별개로 에이전트·이미지 생성·ElevenLabs 사용 비용 및 로컬 렌더 자원이 필요할 수 있어요.
라이선스
Apache-2.0. 재배포 시 LICENSE·NOTICE 및 변경 고지를 확인해야 해요. GSAP·Three.js·폰트 등 외부 구성 요소와 브랜드 자료의 권리는 별개예요.
주의사항과 알려진 이슈
- 초기 릴리스이며 검사 통과가 디자인 품질 보증은 아니에요. 가독성과 화면의 주목점은 사람이 판단해야 해요.
- DOM 검사기는 canvas·WebGL·이미지 속 텍스트를 읽지 못하며 GPU와 소프트웨어 렌더 결과도 달라질 수 있어요.
- 로그인·헤드리스 차단 사이트의 브랜드 캡처는 제한돼요. 브랜드·폰트·음원 사용권을 별도로 확인해야 해요.
- 저자의 비교 사례와 속도 수치는 독립 성능 검증이 아니에요.
확인 범위
확인 날짜: 2026-11-08
확인 커밋: 8c8ec0f2a6f6c9a0da15cd24f7b1298ab298368c
확인한 범위: 공식 저장소 주소·기본 브랜치 커밋·README·라이선스 및 열거된 설정/참조 문서를 정적으로 확인했어요. 저장소 주소의 추가 이전은 확인되지 않았어요.
확인 한계: 설치·코드 실행·모델 호출·계정 연결·유료 결제·실행 성능·보안 감사는 수행하지 않았어요. 설치 명령은 공식 문서 예시이며 최신 배포 패키지와 관측 소스가 동일하다고 보장하지 않습니다.