모션 그래픽 스튜디오
비디오는 코드로 렌더링됩니다. 순수 seek(t) 함수를 가진 HTML 페이지를 Playwright로 프레임 단위로 캡처하고 ffmpeg로 인코딩합니다. 텍스트, UI, 차트, 다이어그램, 모션은 항상 코드입니다. AI 모델이 일러스트레이션, 촬영 보드, 음성을 제공합니다 (references/ai-assets.md 참조).
단계별 게이트 (절대 건너뛰지 말 것; 각 단계에서 승인을 받을 것 ✋)
- 브리프: 목표, 대상, 플랫폼/형식, 길이, 언어 + 방언, CTA, 브랜드, VO 사용 여부, 사실. 장르 선택 (
references/genres.md참조). 장르가 구조, 에너지 프리셋, 후크를 결정합니다. - 컨셉 ✋: 세 가지 완전히 다른 아이디어, 각각 한 줄 설명과 후크. 사용자가 하나를 선택합니다.
- 스크립트 + 스토리보드 ✋: 비트 시트(씬당 하나의 메시지, 후크 ≤ 1.5초), 스타일 바이블, 히어로 자산(GenerateImage →
cut2.py). 스타일프레임으로 씬을 구축한 후node scripts/storyboard.mjs film.html storyboard/name --template templates/storyboard.html --title "…"명령어로 영화 자체에서 html/png/pdf/json을 생성합니다 (references/storyboard.md참조). 스토리보드가 승인되기 전까지 어떤 것도 완전히 애니메이션화하지 않습니다. - 애니매틱 ✋:
node scripts/render.mjs film.html checks_layout.txt --check실행 시 레이아웃 문제 0, 놓친 큐 0, 페이지 오류 0이어야 합니다. 그런 다음 타이밍 검토를 위해 30fps 블러 없는 드래프트를 만듭니다 (render_chunks.mjs film.html out_draft 30 1). - 최종:
render_chunks.mjs film.html out 60 4→sfx.mjs→mix.sh→export.sh→qa.sh를 마스터 및 소셜 파일에 대해 실행합니다. 그런 다음 연락처 시트와 전환 시트를 확인합니다 (references/render-qa.md참조). 이 후에는 요청된 부분만 수정하는 제한된 리비전만 허용됩니다.
하드 규칙 (각 규칙은 실제 실패에서 얻은 교훈입니다)
- 그레인은 정적입니다: 한 번 시드된 타일을 그려 프레임마다 다시 무작위화하지 않습니다. 스터터 스캔의 FLICKER 테스트를 통과해야 합니다.
- 기본적으로 음악 없음: 모션 동기화 SFX + VO. 음악은 요청 시에만 사용하며 라이선스를 취득해야 합니다 (
references/sound.md참조). - 하나의 모션 시스템: 지속 시간은
ENERGY토큰에서만 가져옵니다. 스프링 z ≥ 0.78 (오버슈트 ≤ 2%), 흔들림 없음, 타입에 바운스 없음, 긴 이동에는 호 사용, 모든 상태 변경에 크로스페이드 (references/motion-system.md참조). - 청크 렌더러로 렌더링 (
render_chunks.mjs): 청크당 새 브라우저, 재시도, 동일한 명령어를 다시 실행하여 재개. ~20초 이상의 영화에는 단일 장기 프로세스 렌더링을 절대 사용하지 않습니다. - 올바르게 전사:
align.py(large-v3, VAD on/off 패스, 갭 패스, 스크립트에 강제 정렬) →words.json. 단일 whisper 패스를 절대 사용하지 않습니다. - 자막은 해당 씬에 속합니다: 자막은 씬과 함께 지워지고 푸시되며 씬의 색상을 사용합니다. 요소는 해당 단어가 발화될 때 80% 켜져 있어야 합니다 (±2프레임).
- 스타일: 일러스트레이션, 일관된 캐릭터 (참조 이미지 하나 → 모든 포즈). 기술 설명 영상은 장식용 스톡이 아닌, 구어구별로 계획된 개념 시각 자료 (플로우, 다이어그램, 표, 비교, 타임라인)를 사용합니다.
- 두 가지 내보내기: 60fps 마스터 + 30fps 휴대폰/소셜 파일. 첨부 파일로 보냅니다. 직접 다운로드 링크, 업로드 또는 게시물은 사용자의 명시적 동의가 있어야만 가능합니다.
- 장편 (3–10분): 챕터 계획, 씬 수 (약 1개당 4–7초), 페이싱 다양성 주기와 시각적 다양성, 챕터당 하나의 페이지 (
references/genres.md→ 장편 참조). - 패키지를 분할 유지: scripts/, references/, templates/. 하나의 거대한 파일로 키우지 마십시오.
또한: 아랍어는 단어 단위로만 애니메이션합니다 (references/arabic-rtl.md 참조) · 프레임에 AI 생성 텍스트 없음 · 가상 제품, 가격, 평점에는 SAMPLE 표기 · 사실은 사용자로부터만 제공 · 히어로는 프레임의 60–70%를 채움 · 광고에서 최소 3가지 다른 전환 사용, 같은 전환을 연속으로 두 번 사용하지 않음 (references/transitions.md 참조) · 1초 이상 무음 없음.
기본값 (선택한 값을 명시할 것)
소셜: 9:16 1080×1920, 웹/YouTube: 16:9 · 에너지 ad (광고 및 릴스), explainer (VO 설명 영상), calm (럭셔리/장편 챕터) · 60fps 마스터 + 30fps 소셜 · −14 LUFS, 트루 피크 ≤ −1.5 dBTP · SFX + VO, 음악 없음 · 정적 그레인 0.06 · 일러스트레이티드 플랫 스타일, 하나의 액센트 색상, Noto Kufi Arabic / Cairo + Figtree.
설정
모든 scripts/, templates/, references/ 경로는 이 스킬의 자체 폴더(이 SKILL.md가 있는 폴더, 설치된 위치: .claude/skills/motion-graphics, .agents/skills/motion-graphics, ~/.cursor/skills/motion-graphics, …)를 기준으로 합니다. 해당 폴더를 $SKILL_DIR로 부르고 프로젝트 폴더에서 node "$SKILL_DIR/scripts/render.mjs" … 형태로 스크립트를 실행합니다. $SKILL_DIR 내부에서 npm i를 한 번 실행합니다.
npm i (Playwright), 그 다음 npx playwright install chromium을 한 번 실행합니다. ffmpeg/ffprobe, Python 3 (numpy/scipy/pillow 포함, QA, cut2 용), align.py를 위해 pip install faster-whisper도 필요합니다.
작업 예제 (GitHub 저장소 mr0ibrahim/motion의 examples/ 폴더에 있으며, 설치 시 복사되지 않음): demo-ar/ (13초 걸프 아랍어 앱 광고: RTL 키네틱 타이포, AI 캐릭터, 시차, 카메라 푸시, 줌/푸시/아이리스/스플릿) · demo/ (10.5초 영어 SAMPLE 광고).