nexu-io/motion-anything
한 문장으로 애니메이션을 설명하면 AI가 웹페이지 컴포넌트별로 모션을 즉시 생성하는 로컬 퍼스트 모션 엔진
291+198이번 주0 찜
26포크3이슈
중간맛 분석
Claude Code·Codex·Cursor·Gemini 등 8가지 코딩 에이전트 엔진 또는 BYOK(자신의 키)로 구동되는 로컬 퍼스트 모션 생성 도구입니다. 실행 중인 페이지 위에서 컴포넌트 단위로 모션을 편집하고, 6트랙 키프레임 에디터·4가지 트리거·13가지 모션 동사·스프링 이징을 지원합니다. 결과물은 JSON·CSS·React·Lottie·MP4·GIF 등 다양한 포맷으로 내보낼 수 있으며, Node 18+만 있으면 install 없이 한 줄 명령어로 바로 시작할 수 있습니다. 워터마크나 렌더링 요금이 없고 Apache-2.0 라이선스로 완전히 오픈소스입니다.
이런 레포예요
이럴 때 쓰면 좋아요
- 랜딩 페이지나 제품 소개 영상에 브랜드 일관성 있는 모션을 빠르게 적용하고 싶을 때
- AI로 생성한 웹페이지의 컴포넌트별 애니메이션을 재롤링 없이 세밀하게 수정하고 싶을 때
- After Effects나 Figma 없이 인브라우저에서 MP4·GIF 런치 비디오를 제작하고 싶을 때
핵심 기능
한 문장 프롬프트로 컴포넌트별 모션 생성 및 실행 중인 페이지 직접 편집403개 큐레이션 모션 레시피 + 8가지 AI 에이전트 엔진 지원 (BYOK 포함)JSON·CSS·React·Lottie·MP4·GIF 다중 포맷 내보내기, npm 의존성 제로
대안 대비 차별점
Figma Motion과 달리 핸드오프 파일이 아닌 실제 실행 중인 페이지를 직접 편집하고, 호버·클릭 인터랙션 트리거를 지원하며, Apache-2.0 라이선스로 워터마크·렌더링 요금 없이 완전히 로컬에서 동작합니다.
준비물
- Node.js 18 이상
- 지원되는 AI 에이전트 CLI(Claude Code, Codex, Cursor 등) 중 하나 또는 BYOK API 키(Anthropic / OpenAI / Google)
바로 시작하기
- 레포지토리를 클론합니다.
git clone https://github.com/nexu-io/motion-anything.git
cd motion-anything
- 로컬 서버를 실행합니다 (npm install 불필요).
node cli/bin/motion.js serve 4399
- 브라우저에서 앱을 엽니다.
# http://localhost:4399 접속
이 레포로 만든 것들
🖋 완주 인증하기아직 이 레포로 만든 완주 인증이 없어요. 첫 밥도장을 찍어보세요!
별 추이 · 7일
291+198 / 7일
활용성 · 따라 만들기 좋은가
따라 하기 좋음샘플 점수 46/100
- 관대한 라이선스
- 테스트 있음
- 예제 디렉토리
- 최근 활동
- AGENTS.md
- llms.txt
- 템플릿
🟢 최근 활동 있음 · 2026년 생성
이 레포에 깃밥 배지 달기
[](https://www.gitbap.com/r/nexu-io/motion-anything)🔌 클로드에서 바로 써보기
깃밥을 클로드에 연결하면 이런 레포를 클로드·커서·Codex에서 바로 찾고 체험할 수 있어요.
방법 ① 커넥터 URL
클로드 설정 → 커넥터에 이 주소를 붙여넣기.
https://www.gitbap.com/api/mcp방법 ② 플러그인 (체험까지)
플러그인을 설치하면 /gitbap-trending·/gitbap-try 슬래시 커맨드로 레포를 그 자리에서 체험. Claude Code에서 아래 두 줄을 차례로 실행하세요.
/plugin marketplace add jakeparkcolde/gitbap-cowork/plugin install gitbap-cowork@gitbapAI가 README 기반으로 요약했습니다 · 원문 보기