Communitygithub.com

alesha-pro/tools

완성된 코드 기반 모션 그래픽 제작: 쇼릴, 제품 출시 영상, 키네틱 타이포그래피, 연속적인 UI 변형, 애니메이션 설명 영상. 음악, 프레임 비평 및 검증된 MP4 내보내기를 지원합니다. 모션 비디오 제작 또는 명시적인 모션 릴 요청에 사용하며, 일반 슬라이드 데크, 비디오 요약 또는 기존 영상 편집에는 사용하지 않습니다.

tools란 무엇인가요?

Motion Reel Studio는 코딩 에이전트를 통해 완전한 애니메이션 프로젝트와 검증된 MP4 영화를 제작하는 전문 기술입니다. HTML 프리뷰나 프롬프트에 그치지 않고, 편집 가능한 애니메이션 산출물과 재현 가능한 렌더링 파이프라인을 제공합니다. 이 기술은 Remotion, HyperFrames 또는 번들된 Canvas + Playwright + FFmpeg 스타터를 지원하며, 특정 모델이나 유료 서비스 없이 작동합니다. 워크플로우는 참조 수집, 감독 브리프 작성, 사운드 분석, 스틸 컷 및 애니매틱 제작, 폐쇄형 스프링 애니메이션 구현, 체계적인 프레임 비평, 최종 QA 및 MP4 내보내기 단계로 구성됩니다. 비결정적 요소를 방지하고 시간 기반 순수 함수를 통해 재현 가능한 렌더링을 보장하며, 음악 합성, SFX, 루프 검사 및 기술 메타데이터 검증을 내장하고 있습니다. 주로 쇼릴, 제품 출시 영화, 키네틱 타이포그래피, 연속 UI 모프, 애니메이션 설명 영상에 사용되며, 일반 슬라이드나 영상 편집에는 적합하지 않습니다.

지원 대상✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/alesha-pro/tools/tree/HEAD/skills/motion-reel

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

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

문서

Motion Reel Studio

편집 가능한 애니메이션 프로젝트와 검증된 영화를 제작하세요. 단순한 프롬프트나 HTML 프리뷰가 아닙니다. Movez의 강좌를 기반으로 각색되었으며, 구현 및 수정 사항은 증명에 문서화되어 있습니다. 모든 코딩 에이전트에서 작동하며 특정 모델, 유료 서비스 또는 외부 기술이 필요하지 않습니다.

범위 및 시작 결정

사용자의 브리프와 기존 프로젝트 지침을 읽으십시오. 요청된 엔진, 스타일, 음악 및 형식을 유지하십시오. 프로젝트가 이미 Remotion 또는 HyperFrames를 사용하는 경우 해당 프레임워크의 설치 지침/현재 문서를 참조하여 확장하십시오. 그 외의 경우 번들된 Canvas + Playwright + FFmpeg 스타터를 사용하십시오. 아래 명령어는 이 기본 경로에만 해당됩니다.

주제/제품 URL, 목적, 길이, 화면 비율, 참조 자료, 브랜드 에셋 및 사운드를 설정하십시오. 제공된 정보를 추론하고, 결과에 중요한 누락 정보만 질문하십시오. 개방형 쇼릴의 경우 컨셉, 15초, 1080×1920, 60fps 및 원본 합성 오디오를 선택하고 명시하십시오. 제품 주장이나 스크린샷을 임의로 만들지 마십시오. 실제 제품 에셋이 없는 경우 수집하거나 승인된 컨셉 데모임을 명확히 라벨링하십시오.

프로젝트를 사용자의 아티팩트 위치 안에 생성하십시오. X 저장소에서는 새 영화에 대해 posts/<slug>/를 사용하고 모든 에셋을 그 안에 보관하십시오. 저장소 루트에 프로젝트 파일을 설치하지 마십시오. 기술 자체는 개인 기술 디렉토리에 유지됩니다. 기본적으로 API 지출 없이 로컬에서 작업하십시오. 요청된 제공자는 사용 가능한 도구, 자격 증명 및 승인된 예산이 필요합니다. 게시는 별도의 작업입니다.

제작 워크플로우

  1. 참조 및 에셋. 제공된 이미지를 검사하십시오. 비디오 참조의 경우 0.5–1초마다 프레임을 추출하고 컷 주변의 모션을 검사하십시오. 브라우저 도구로 실제 제품 상태를 캡처하고 원본 URL과 캡처 날짜를 docs/assets.md에 보관하십시오. 글꼴/이미지를 로컬에 다운로드하고 디코딩을 기다리십시오. docs/style-guide.md를 작성하십시오: 팔레트, 타이포그래피, 공간 계층 구조, 샷 리듬, 전환 언어, 카메라, 텍스처, 차용할 요소와 피해야 할 요소. 참조가 없는 경우 원본 비주얼 방향을 명시적으로 정의하십시오.
  2. 감독 브리프. 요청된 모드에 대해 방향을 읽으십시오. docs/brief.md와 docs/shotlist.md를 작성하십시오. 각 샷은 목적, 시작/끝 프레임, 정확한 카피, 비주얼 상태, 카메라, 전환, 사운드 큐 및 에셋을 포함해야 합니다. 그림과 오디오에 대해 단일 타임라인을 사용하십시오. 간결한 계획을 제시하고 승인된 요청 내에서 진행하십시오. 사용자가 계획/승인 게이트를 요청한 경우에만 대기하십시오. 침묵은 그 승인을 제공하지 않습니다.
  3. 사운드와 비트. 오디오 및 실행을 읽으십시오. 제공된 음악을 분석하거나 점수를 합성하고 beats.json과 cues.json을 저장하십시오. 비트 감지기는 소절 다운비트를 확립하지 않습니다. 추정치에 라벨을 붙이고 바 수준 동작을 설계하기 전에 첫 번째 다운비트를 확인하십시오. 변경되지 않은 트랙 요청은 그대로 유지하십시오. 허가 없이 해당 소스를 늘리거나 정규화하지 마십시오.
  4. 스틸 컷과 애니매틱. 히어로 구성을 만들고 움직임을 다듬기 전에 각 샷을 샘플링하십시오. 동일한 화면 비율로 저해상도 애니매틱을 의도된 비트 그리드와 함께 렌더링하십시오. 페이싱과 전화기 가독성을 검사하십시오. 긴 영화의 경우 챕터를 구현하기 전에 캐릭터 바이블과 챕터 타이밍 계약을 유지하십시오. 독립적으로 승인되지 않은 경우 위임하지 마십시오.
  5. 애니메이션. window.seek(t)를 순수 시간-프레임 매핑으로 구현하십시오. 폐쇄형 스프링 트랙을 사용하십시오. 절차적 무작위성을 프레임별로 시드하고 리셋하거나, 시간과 요소 ID에서 노이즈를 유도하십시오. 렌더 모드에서 지속적인 통합, 타이머, CSS 전환 또는 벽시계 샘플링을 사용하지 마십시오. 로컬 에셋 준비 상태는 window.ready에 속합니다. 각 화면 비율에 대해 반응형 구성을 결정하십시오. 와이드 최종본을 인물 사진으로 자르지 마십시오.
  6. 비평과 수정. 리뷰를 읽으십시오. 연락처 시트, 빠른 움직임 주변의 연속 프레임, 그리고 재생 도구가 가능한 경우 실제 재생을 검사하십시오. 라운드당 최대 세 가지 영향력이 큰 결함을 수정하고 영향을 받은 범위를 다시 렌더링하십시오. 기본적으로 최대 세 번의 집중 라운드를 사용하십시오. 브리프를 충족하고 중대한 문제가 없을 때 중단하거나 구체적인 차단 요소를 보고하십시오. 패스를 위해 자기 점수를 높이지 마십시오. 스틸 컷으로는 오디오나 모션 재생을 확인할 수 없습니다.
  7. 최종본과 전달. 요청된 해상도를 렌더링하고, 오디오를 믹싱하고, QA 시트를 만들고, 스트림 메타데이터, 길이, 프레임 수 및 전체 디코딩을 확인하십시오. out/final.mp4, 포스터, 연락처 시트, 소스, 재현 가능한 명령어 및 간결한 남은 제한 사항을 전달하십시오. 루프가 요청된 경우에만 out/loop-check.mp4를 포함하십시오. 공개 복사본은 프로젝트의 작성 규칙과 최종 휴머나이저 패스(가능한 경우)를 따릅니다.

포함된 작업 툴체인

실행 전 실행을 읽으십시오. <skill>을 이 SKILL.md의 디렉토리로, <project>를 선택한 영화 디렉토리로 바꾸십시오.

python3 <skill>/scripts/init_project.py <project>
cd <project>
npm install
npx playwright install chromium
node render.mjs --width 360 --height 640 --fps 30 --out out/animatic.mp4
python3 audio.py synth --duration 15 --bpm 120 --out out/score.wav --beats beats.json
python3 audio.py sfx --duration 15 --cues cues.json --out out/sfx.wav
node render.mjs --width 1080 --height 1920 --fps 60 --sub 4 --out out/silent.mp4
python3 finish.py mix --video out/silent.mp4 --music out/score.wav --sfx out/sfx.wav --out out/final.mp4
python3 finish.py qa --video out/final.mp4 --out out/qa --expected-duration 15 --expected-width 1080 --expected-height 1920 --expected-fps 60 --require-audio

스타터는 완전한 추상 테스트 애니메이션으로, 크리에이티브 최종본이 아닙니다. 해당 씬, 카피, 점수 및 큐를 브리프로 교체하십시오. motion.mjs는 올바른 언더댐핑, 크리티컬 및 오버댐핑 스프링, 다중 대상 트랙, 텍스트 교체 불투명도 및 시드 노이즈를 제공합니다. render.mjs는 범위 렌더링, 서브프레임 블러, 로컬 HTTP 서빙, 준비 상태 확인 및 비순차 결정론 검사를 제공합니다. audio.py는 결정론적 점수, SFX 및 선택적 음악 분석을 제공합니다. finish.py는 2패스 라우드니스 믹스, 전체 영화 페이지가 있는 연락처 시트, 폰 시트, 액션 스트립, 루프 복사본 및 기술 검사를 제공합니다.

품질 불변 조건

  • 콘텐츠는 소리 없이도 이해할 수 있어야 하며, 소리는 실제 모션 이벤트를 강화해야 합니다.
  • 요청되지 않은 경우 일반적인 가운데 정렬 제목/그라데이션/페이드 템플릿을 피하십시오. 구체적인 구성과 가시적인 변환을 선호하십시오. "2–4초마다 새로움"은 모든 영화에 적용되는 규칙이 아닌 짧은 형식 페이싱 휴리스틱입니다.
  • 스프링은 질량을 표현합니다. 재료에 맞는 감쇠를 선택하십시오. 모든 라벨을 튀게 하거나 의도적인 선형/주기적 운동을 스프링으로 대체하지 마십시오.
  • 텍스트는 컨테이너가 변경되기 시작한 후에 진입하고, 호환되지 않는 콘텐츠가 도착하기 전에 종료됩니다. 최종 배율에서 글리프를 선명하게 유지하고 360px 너비에서 테스트하십시오.
  • 모듈로 시간만으로는 이음새를 연속적으로 만들 수 없습니다. 끝 부근과 시작 위치, 속도, 가시성 및 사운드를 일치시키고 결합된 재생을 검사하십시오.
  • 소프트웨어/프레임 결정론을 미적 품질과 분리하여 유지하십시오. 재현 가능한 나쁜 프레임은 여전히 나쁜 프레임입니다.

관련 스킬