whaleyxbt/claude-motion

해결하는 문제

코딩 에이전트는 고품질 모션 디자인에 필요한 '감각'과 정밀함을 다루는 데 어려움을 겪는 경우가 많습니다. API를 학습할 수는 있지만, 부드러운 이징(easing)을 보장하거나, 영상과 소리를 동기화하거나, 최종 렌더링 전에 시각적 정확성을 검증하는 능력이 부족한 것이 일반적입니다. 이 툴킷은 디자인 규칙, 자체 검토 메커니즘, 사운드 엔진을 제공하여 에이전트가 전문가 수준의 모션 그래픽과 시뮬레이션을 제작할 수 있도록 돕습니다.

작동 방식

이 툴킷은 일련의 '기술'과 구조화된 파이프라인을 사용하여 에이전트(Claude Code 또는 Cursor 등)와 통합됩니다.

• 디자인 규칙: 모호한 지시 대신 이징 곡선, 스프링 프리셋, 타이밍(예: 등장 장면을 위한 특정 베지에 곡선)에 대한 구체적인 수치 가이드라인을 제공합니다.
• 자체 검토 루프: 에이전트는 영상을 직접 볼 수 없으므로, 시스템이 '콘택트 시트'(타임스탬프가 찍힌 프레임 그리드)를 렌더링합니다. 에이전트는 이 프레임들을 분석하여 충돌, 클리핑, 가독성을 확인하고 최종 렌더링 전에 오류를 수정합니다.
• 사운드 엔진: 순수 Python 기반 신디사이저가 큐 시트를 통해 효과음(클릭, 슈슉 소리, 라이저 등)을 생성하여 오디오가 시각적 타임라인과 완벽하게 동기화되도록 합니다.
• 웹 시뮬레이션 파이프라인: 복잡한 시뮬레이션(three.js를 사용한 3D 장면 등)의 경우, headless Chromium과 ffmpeg를 사용하여 HTML 페이지를 프레임 단위로 렌더링함으로써 렌더링 속도와 관계없이 일정한 60 fps 출력을 보장합니다.
• 통합 타임라인: JSON 파일이 모든 '비트'를 타임스탬프에 매핑하며, 장면, 사운드 엔진, 검토 루프가 이를 사용하여 모든 요소를 동기화합니다.

대상 사용자

After Effects와 같은 수동 도구 없이 AI 코딩 에이전트를 사용하여 모션 그래픽, 홍보 영상, 기술 시뮬레이션 제작을 자동화하려는 개발자 및 디자이너.

주요 특징

• 프레임 단위의 정확한 캡처: Playwright와 ffmpeg를 사용하여 웹 시뮬레이션을 60 fps MP4로 렌더링합니다.
• 자동화된 시각적 QA: 에이전트가 자신의 작업물에 대한 콘택트 시트를 검토하여 품질 보증을 수행할 수 있게 합니다.
• 절차적 오디오: 외부 샘플 없이도 마스터링된 오디오를 생성하는 커스텀 Python 사운드 엔진.
• 비트 동기화 타이밍: 트랙 템포를 분석하여 시뮬레이션을 음악에 맞추는 beats.py 도구.