Communitygithub.com

igorcacerez/motion-video-studio

코드로 모션 디자인 비디오, 광고, 설명 영상 및 2D/3D 릴스를 제작합니다. Three.js, 테이크별 참조, 운동 타이포그래피, 실제 UI, 동기화된 오디오 및 결정론적 렌더링을 활용합니다. Claude Code 또는 Codex와 함께 사용하여 이러한 유형의 비디오를 제작하거나 시각적 재구성을 수행하세요.

motion-video-studio란 무엇인가요?

Motion Video Studio는 코드 기반 모션 디자인 비디오 제작을 위한 포괄적인 AI 에이전트 스킬입니다. 이 스킬을 사용하면 브리핑을 편집 가능한 소스, 검토된 프레임, 오디오 및 MP4 파일로 변환할 수 있습니다. Three.js 0.187.0을 기반으로 하여 2D/3D 요소, 운동 타이포그래피, 실제 UI 및 동기화된 오디오를 포함한 고품질 비디오를 제작할 수 있습니다. Claude Code, Cursor, Codex 등 다양한 AI 에이전트 플랫폼과 호환되며, 참조 비디오 분석, 키프레임 및 애니마틱 제작, 여러 번의 검토 라운드, 최종 QA를 포함한 체계적인 제작 파이프라인을 제공합니다. 결정론적 렌더링 엔진을 사용하여 프레임 간 상태, 실시간 클록, `Math.random`, 타이머, CSS 전환 또는 `requestAnimationFrame` 없이 정확하고 일관된 출력을 보장합니다. 이 스킬은 또한 로컬 에셋 수집, 오디오 합성 및 믹싱, 린팅, 샷리스트 생성 등을 위한 다양한 스크립트를 제공하여 종합적인 비디오 제작 워크플로우를 지원합니다.

지원 대상✓Claude Code✓Codex CLI✓Cursor
npx skills add https://github.com/igorcacerez/motion-video-studio-skill/tree/HEAD

즐겨 사용하는 AI에게 물어보기

이 에이전트 스킬이 미리 로드된 새 채팅을 엽니다.

문서

Motion Video Studio

브리핑을 편집 가능한 소스, 검토된 프레임, 오디오 및 MP4로 변환하세요. 기본은 Movez 코스입니다. 12개 챕터의 매핑을 참조하세요. 스킬을 활성화했다고 해서 전문가 수준의 품질을 약속하지 마세요. 아티팩트를 제작, 검사 및 수정하세요.

올바른 모드로 시작하세요

  • 예제와 유사한 참조: 테이크별 분석 및 효과 레시피를 읽으세요. 참조는 examples/reference/original.mp4에 있습니다. 학습 자료이며, 코드와 별도의 저작권이 있습니다.
  • 제품 비디오: npm run gather -- --url URL --out assets/brand를 실행하세요(제공된 URL만 사용; 데스크톱/모바일 화면, 이미지/아이콘, 색상, 글꼴 및 라이선스가 "확인되지 않음"인 inventory.json 생성). 또한 URL, 실제 화면, 로고, 글꼴, 색상, 승인된 텍스트 및 CTA를 수집하세요. 템플릿에는 명시적으로 레이블이 지정된 가상 UI가 있습니다. 기존 제품을 광고하기 전에 실제 이미지로 교체하세요.
  • UI 모프/루프: assets/morph/의 지침과 템플릿을 사용하세요. production.md의 루프 섹션을 읽으세요.
  • 3D 요소: threejs-guide.md를 읽고, scripts/three-helpers.mjs를 재사용하며 assets/three/ 템플릿을 사용하세요. Three.js 0.187.0 종속성은 이미 패키지에 포함되어 있습니다. 참조를 위해 94개의 공식 문서가 첨부되어 있습니다. 카메라, 지오메트리, 재질, 조명 및 t 함수 기반 애니메이션을 사용하세요. 매뉴얼의 실시간 루프를 렌더로 그대로 가져오지 마세요.
  • 긴 영화/캐릭터: assets/brief-template.md의 감독 템플릿을 읽으세요. 프로젝트별로 아이덴티티 바이블과 애니메이션 가이드를 유지하세요.
  • 특정 부분 검토: 기존 소스를 유지하고 --start 및 --duration으로 영향을 받는 구간만 렌더링하세요.

야망 수준(L1 스모크 테스트 … L5 장편 영화)은 prompts.md에서 선택하세요. 이 수준은 얼마나 질문하고, 검토하고, 중단할지를 정의합니다. 한 줄짜리 코드는 엔진을 테스트할 뿐 아이디어를 테스트하지 않습니다. 자체 작업에는 논제, 참조 및 검증 가능한 사실이 필요합니다.

아래 명령어는 이 SKILL.md가 포함된 폴더를 기준으로 합니다. 환경에서 해당 폴더를 찾으세요. 현재 디렉토리가 스킬이라고 가정하지 마세요. 각 영화에 대해 패키지 사본에서 작업하고 재사용 가능한 설치를 유지하세요. npm run new -- --dir ../my-film은 docs/(브리프, 스타일 가이드, 샷리스트 md/json, 모프 사양, 검토 로그), refs/, assets/, audio/ 및 out/을 덮어쓰지 않고 생성합니다. 브랜드별로 하나의 폴더/세션을 사용하세요.

제작 계약

  1. 누락된 입력 항목(주제/제품, 목표, 길이, 형식, 브랜드, 참조, 배경 음악/내레이션, 예산 및 전달물)만 수집하세요. 이미 제공된 것을 활용하세요. 되돌릴 수 있는 가정을 기록하세요.
  2. 애니메이션 전에 참조를 분석하세요. npm run analyze -- --input VIDEO --fps 4 --out out/reference를 실행하세요. 프레임을 여세요. 스타일, 테이크, 리듬, 마스크, 연속성 및 오디오를 기록하고 관찰, 가설 및 측정을 구분하세요. 정확한 타이밍을 위해 원본에서 연속된 프레임을 확인하세요.
  3. docs/style_guide.md 및 docs/shotlist.md를 시작/종료, 메시지, 지배적 개체, 진입, 유지, 종료, 연속성, 카메라 및 사운드 큐와 함께 작성하세요. assets/brief-template.md를 사용하세요. 필요할 때 창의적 결정을 위해 제시하세요. 문서에는 승인을 요청하는 프롬프트가 포함되어 있습니다. 침묵을 승인으로 간주하지 마세요. 전체 작업에 대한 승인이 이미 있는 경우 되돌릴 수 있는 로컬 작업을 진행하세요. 3b. docs/shotlist.json을 그리드 계획으로 변환하세요: npm run shotlist -- --shotlist docs/shotlist.json --beats out/beats.json --duration 24 --out out/cues.json. 이는 비트를 벗어난 샷, 4초 이상 새로운 요소가 없는 간격을 지적하고 sfx에 대한 큐를 생성합니다. 애니메이션을 작성하기 전에 결과를 보여주세요.
  4. scripts/beats.py로 기존 트랙을 측정하고 박자와 다운비트를 확인하세요. 음악이 없으면 npm run audio로 원본을 합성하세요. 내레이션을 음성과 동기화하고 그리드를 지원으로 사용하세요. 비트에 맞추기 위해 단어를 자르지 마세요. 4b. 새 페이지를 렌더링하기 전에 npm run lint -- --input PASTA를 실행하세요. Math.random, 시계, 타이머, requestAnimationFrame, CSS 전환, will-change, 글로우 및 window.seek 부재를 확인합니다. 오류는 렌더를 차단합니다.
  5. 마무리 전에 키프레임과 애니마틱을 제작하세요. 기본적으로 엔진 A(assets/starter/)를 사용하세요. 필요성이 정당화되는 경우에만 Remotion/HyperFrames를 선택하세요. 라우트 아키텍처는 references/production.md에 있습니다. 습관적으로 모든 엔진을 설치하지 마세요.
  6. 문서화된 검토 라운드를 최소 세 번 docs/review_log.md에서 수행하세요: 테이크당 3–5장의 스틸, 비트별 연락처, 360px 테스트 및 전환의 프레임 범위. 각 라운드에서 타임스탬프와 함께 가장 큰 문제 세 가지를 기록하고 수정한 후 다시 검토하세요. 후크, 가독성, 움직임, 다양성, 구성, 브랜드 및 싱크로율을 1에서 10까지 평가하세요. 목표: 모두 ≥8, 증거 포함; 볼 수 없거나 들을 수 없을 때 점수를 조작하지 마세요.
  7. 마스터를 렌더링하고, 오디오를 믹싱하고, qa를 실행하고, review를 준비하세요. 캔버스뿐만 아니라 인코딩된 MP4도 재평가하세요. 각 비율에 대해 레이아웃을 재구성하세요. 가로 비디오를 잘라 세로로 만들지 마세요.
  8. MP4, 포스터, 전체 길이의 연락처 시트, 소스, 브리프, 에셋/크레딧 목록 및 제한 사항을 전달하세요. 영화에 루프가 필요한 경우에만 접합 테스트를 생성하세요. 테스트된 내용과 여전히 사람의 검토가 필요한 내용을 말하세요. 게시, 유료 서비스 및 업로드는 사용자의 명시적 승인이 필요합니다.

엔진 및 시각적 언어 규칙

  • window.seek(t)는 결정론적으로 전체 프레임을 그려야 합니다. 프레임 간 상태, 실시간 시계, Math.random, 타이머, CSS 전환 또는 requestAnimationFrame은 렌더 경로에 없어야 합니다. 그리기 시드별로 PRNG를 재생성하거나 시간으로 노이즈를 인덱싱하세요.
  • 첫 번째 프레임 전에 글꼴과 에셋을 기다리세요. 출력 해상도의 캔버스, deviceScaleFactor:1 및 로컬 데이터를 사용하세요. 카메라로 확대된 텍스트에 will-change를 사용하지 마세요.
  • 분석적 스프링을 사용하세요. 여러 대상의 경우 track을 통해 계단 응답을 합산하세요. 타이포그래피: 감지 가능한 오버슈트 없음; UI: 미묘함; 마스코트: 방향이 허용하는 경우 표현적. 상수와 헬퍼는 scripts/motion.mjs에 있습니다.
  • 문서 방향: 중앙 제목 그라데이션, 모든 항목 페이드 인, 모서리 장식 레이블, 프레임, UI의 글로우 및 일반적인 파티클을 피하세요. 다른 방향이 없는 경우 디스플레이 글꼴 하나, UI 글꼴 하나 및 악센트 하나. 참조의 의미론적 빨간색 비용은 기능적 예외입니다.
  • 2–4초마다 내러티브적으로 새로운 것을 제공하세요. 긴 영화의 경우 3–5초마다 페이오프를 제공하세요. 처음 2초 안에 후크를 거세요. 새로운 것을 지속적인 동요와 혼동하지 마세요.
  • 장면 간 개체 보존: 크게 → 작게 → 주변 앵커 → 재개. 모프의 텍스트는 변환 시작 후에 들어가고 다음 변환 전에 나갑니다. 커서와 클릭은 실제 작업과 일치해야 합니다.
  • 기존 제품에는 실제 화면과 데이터를 사용하세요. 메트릭, 사용 후기 또는 기능을 조작하지 마세요. 컨셉의 경우 UI가 가상임을 명시적으로 선언하세요.
  • 루프의 경우 이미지, 위치, 속도 및 오디오의 연속성을 요구하세요. t % duration은 시계만 반복합니다. 접합을 테스트하고 상태가 수렴하도록 만드세요.
  • 문서의 마스터 참조: 60fps, 프레임당 4개의 하위 프레임, H.264 yuv420p, CRF 16. --fps 30 --sub 1 --scale 0.5는 경제적인 애니마틱이며 이 마스터가 아닙니다.
  • 오디오: 목표 -14 LUFS 통합; 헤드룸 유지(이 패키지에서 목표 실제 피크 -1.5dBTP). 믹싱 및 인코딩 후 측정하세요. 제공된 음악 파일은 원본 그대로 유지됩니다. 믹싱을 위해 사본으로 작업하세요.

준비된 스크립트

모든 매개변수와 예제는 scripts.md에서 확인하세요. 이미 존재하는 헬퍼를 다시 작성하지 마세요.

npm ci --ignore-scripts
npx playwright install chromium
npm run doctor
npm test
npm run new -- --dir ../meu-filme
npm run gather -- --url https://produto.com --out assets/brand
npm run lint -- --input assets/starter
npm run shotlist -- --shotlist docs/shotlist.json --beats out/beats.json --out out/cues.json
npm run audio -- --duration 24 --bpm 120
npm run sfx -- --cues assets/starter/cues.json --duration 24
npm run mix -- --music out/score.wav --sfx out/sfx.wav --duration 24
npm run stills -- --format 16:9 --out out/stills
npm run render -- --format 16:9 --audio out/mix.wav --out out/final.mp4
npm run qa -- --input out/final.mp4 --duration 24 --require-audio
npm run review -- --input out/final.mp4 --out out/review

렌더러는 루프백을 통해서만 로컬 에셋을 열고 브라우저에서 외부 네트워크를 차단합니다. 이로 인해 외부 코드가 신뢰할 수 있는 것은 아닙니다. 실행하기 전에 코드를 읽고 환경의 권한을 존중하세요. 키를 출력하거나 .env를 공유 프로젝트에 포함하지 마세요. 기본 패키지는 API나 유료 크레딧 없이 작동합니다.

관련 스킬