웹사이트 URL을 HTML 기반의 60fps 제품 출시 영상으로 만드는 Claude Code 스킬입니다.
Lob0Garou/opus-visual-motion-engine
코딩 모델에 모션 그래픽과 코드 렌더링 영상 제작을 위한 계획, 렌더링, 자동 QA, MP4 내보내기 게이트형 파이프라인을 제공하는 에이전트 스킬입니다.
- 스타
- 3
- 포크
- 0
- 열린 이슈
- 0
- 마지막 커밋
- 26일 전
어떤 프로젝트인가요?
opus-visual-motion-engine은 모션 그래픽, 코드 렌더링 영상, 키네틱 타이포그래피, 랜딩 페이지와 다이어그램을 제작하는 에이전트 스킬입니다. 코딩 모델이 정해진 순서에 따라 작업하도록 안내합니다. 비트와 타임라인이 포함된 계획을 작성하고, seek(t) 및 DURATION 계약을 제공하는 1920×1080 HTML 템플릿을 기반으로 만들고, 헤드리스 렌더링과 자동 QA를 실행한 뒤 문제를 수정하고 ffmpeg로 MP4, WebM 또는 GIF로 내보냅니다.
QA 스크립트는 모든 프레임을 렌더링해 프레임 정지 또는 공백, 비결정적 출력, 텍스트 충돌, 대비와 최소 글자 크기, AI 생성 디자인에서 흔히 나타나는 패턴을 확인합니다. 콘택트 시트와 키 프레임, 프레임별 잉크 커버리지가 담긴 report.json을 생성하므로 이미지 입력을 지원하지 않는 모델도 결과를 검토할 수 있습니다. 페이지 모드에서는 데스크톱, 모바일, 다크 모드 레이아웃도 확인합니다.
저장소에는 큐 시트를 바탕으로 결정론적인 배경 음악과 효과음을 생성하는 score 스크립트와, 모션을 사운드에 맞출 수 있도록 비트, 온셋, 라우드니스 데이터를 추출하는 audio-data 스크립트도 포함되어 있습니다.
핵심 기능
- 01재사용 가능한 1920×1080 HTML 컴포지션 템플릿을 사용하는 계획부터 내보내기까지의 파이프라인.
- 02시드가 지정된 난수 생성기와 이징 헬퍼를 사용하는 결정론적 seek(t) 타이밍 계약.
- 03프레임 정지, 텍스트 충돌, 낮은 대비, 장면 공백을 감지하는 헤드리스 렌더링 QA.
- 04선택적으로 오디오를 포함해 ffmpeg로 프레임 단위로 정확한 MP4, WebM 또는 GIF를 내보냅니다.
- 05큐 시트로 독창적인 음악과 효과음을 생성하고, 모션을 오디오에 맞추기 위한 비트 데이터를 추출합니다.
활용 사례
- 코딩 에이전트로 짧은 모션 그래픽이나 쇼릴 제작.
- 수동 편집기 없이 코드 렌더링 영상이나 키네틱 타이포그래피 제작.
- 프레임을 직접 보지 않고 에이전트가 생성한 애니메이션의 레이아웃 및 타이밍 결함 확인.
- 자동 검증을 거치는 애니메이션 전환이 있는 랜딩 페이지나 다이어그램 제작.
빠른 시작
- 1
저장소를 harness의 skills 폴더에 clone합니다
git clone https://github.com/Lob0Garou/opus-visual-motion-engine ~/.dsh/skills/opus-visual-motion-engine - 2
스크립트 종속 항목과 Chromium 브라우저를 설치합니다
cd ~/.dsh/skills/opus-visual-motion-engine/scripts && npm install && npx playwright install chromium - 3
새 세션을 시작하고 에이전트에게 이 skill을 사용하도록 요청한 다음, 생성물에 대한 QA 검사를 실행합니다
node scripts/qa.mjs composition.html
사용 전 알아둘 점
- 코딩 모델을 위한 agent skill이므로, 유용하게 사용하려면 호환되는 agent harness가 필요합니다.
- 내보내기에는 PATH에 ffmpeg가 있어야 하며 Node 18 이상이 필요합니다.
- 벤치마크는 각 arm에서 한 번씩만 실행했으므로, 보고된 성능 향상은 통계적으로 입증되지 않았습니다.
- 프로젝트는 새로 만들어졌으며 별은 3개뿐입니다.
토픽
자주 묻는 질문
- opus-visual-motion-engine은(는) 무엇인가요?
- 코딩 모델에 모션 그래픽과 코드 렌더링 영상 제작을 위한 계획, 렌더링, 자동 QA, MP4 내보내기 게이트형 파이프라인을 제공하는 에이전트 스킬입니다. opus-visual-motion-engine은 모션 그래픽, 코드 렌더링 영상, 키네틱 타이포그래피, 랜딩 페이지와 다이어그램을 제작하는 에이전트 스킬입니다. 코딩 모델이 정해진 순서에 따라 작업하도록 안내합니다. 비트와 타임라인이 포함된 계획을 작성하고, seek(t) 및 DURATION 계약을 제공하는 1920×1080 HTML 템플릿을 기반으로 만들고, 헤드리스 렌더링과 자동 QA를 실행한 뒤 문제를 수정하고 ffmpeg로 MP4, WebM 또는 GIF로 내보냅니다.
- opus-visual-motion-engine은(는) 무료로 사용할 수 있나요? 라이선스는 무엇인가요?
- opus-visual-motion-engine은(는) MIT 라이선스의 오픈소스입니다. 상업용 제품에 사용하기 전에 라이선스 조건을 확인하세요.
- opus-visual-motion-engine은(는) 아직 유지보수되고 있나요?
- 활발히 유지보수 중. opus-visual-motion-engine의 마지막 커밋은 2026년 9월 26일입니다.
- opus-visual-motion-engine은(는) 어디에 사용할 수 있나요?
- 코딩 에이전트로 짧은 모션 그래픽이나 쇼릴 제작. 수동 편집기 없이 코드 렌더링 영상이나 키네틱 타이포그래피 제작. 프레임을 직접 보지 않고 에이전트가 생성한 애니메이션의 레이아웃 및 타이밍 결함 확인. 자동 검증을 거치는 애니메이션 전환이 있는 랜딩 페이지나 다이어그램 제작.
- opus-visual-motion-engine는 어떻게 설치하나요?
- 저장소를 harness의 skills 폴더에 clone합니다: git clone https://github.com/Lob0Garou/opus-visual-motion-engine ~/.dsh/skills/opus-visual-motion-engine 스크립트 종속 항목과 Chromium 브라우저를 설치합니다: cd ~/.dsh/skills/opus-visual-motion-engine/scripts && npm install && npx playwright install chromium 새 세션을 시작하고 에이전트에게 이 skill을 사용하도록 요청한 다음, 생성물에 대한 QA 검사를 실행합니다: node scripts/qa.mjs composition.html
- opus-visual-motion-engine은(는) 어디서 받을 수 있나요?
- 소스 코드와 설치 방법은 GitHub에 있습니다: https://github.com/Lob0Garou/opus-visual-motion-engine
요약은 프로젝트 README를 바탕으로 AI가 작성했습니다. GitHub 통계는 매일 갱신됩니다.
관련 프로젝트
코딩 에이전트가 대본을 내레이션이 있는 설명 영상이나 제품 데모로 제작합니다.
Claude Code와 Codex용 에이전트 스킬로, 앱의 실제 UI를 음악에 맞춰 편집하고 로컬에서 렌더링해 출시 영상과 짧은 동영상을 만듭니다.
짧은 테마를 비트에 맞춘 모션 그래픽 영상으로 만들고 HyperFrames로 MP4 렌더링하는 Claude Code 스킬입니다.
단계별 품질 게이트로 30~90초 모션 그래픽 영상을 제작하도록 안내하는 Claude Code 및 Codex 에이전트 스킬입니다.
AI 코딩 에이전트가 Remotion으로 방송 스타일 모션 그래픽을 만들도록 안내하는 Agent Skills 4종입니다.