motion-anything 소개
motion-anything은 웹 페이지와 영상에 넣을 모션(motion, 애니메이션)을 원하는 느낌을 적은 한 문장에서 만들어 내고, 그 결과물을 다시 손으로 다듬을 수 있게 하는 로컬 실행형 모션 엔진입니다. AI로 랜딩 페이지를 한 번 생성하고 나면 모션을 조금 바꾸려 해도 페이지 전체를 다시 생성하거나 CSS를 직접 손봐야 하는, 생성과 수정 사이의 간극이 이 도구가 겨냥하는 문제입니다. motion-anything은 그 간극을 실행 중인 페이지 위에서 컴포넌트 단위로 모션을 편집하고 파일에 되써 넣는 방식으로 메웁니다.
동작의 출발점은 사용자가 직접 고른 코딩 에이전트입니다. 프롬프트는 별도 서버로 프록시되지 않고, PATH에서 자동 감지된 CLI 세션이나 사용자의 API 키(BYOK, Bring Your Own Key)로 로컬에서 실행됩니다. 개발팀은 이 구조를 두고 "Describe the feeling — your AI ships the animation" 이라는 한 줄로 소개합니다. 즉 원하는 분위기를 문장으로 적으면 자신이 쓰던 에이전트가 애니메이션을 만들어 주고, 결과는 실행 가능한 파일로 남습니다.
motion-anything은 nexu.io의 Open Design 계열 프로젝트 가운데 모션을 담당하는 층으로 소개되며, 현재 버전은 v0.1.0 입니다. 주 언어는 JavaScript이고, npm 의존성이 전혀 없다는 점을 특징으로 내세웁니다. 본 게시물에서는 motion-anything의 동작 흐름, 실행 중인 페이지에서의 편집 방식, 이를 구동하는 엔진 구조, 레시피 라이브러리와 내보내기, 설치 방법을 정리합니다.
motion-anything의 동작 흐름
motion-anything의 작업은 네 단계로 이어집니다. 먼저 원하는 모션을 한 문장으로 설명하면, 선택한 코딩 에이전트가 그에 맞는 애니메이션 페이지를 생성합니다. 그다음 실행 중인 페이지에서 컴포넌트별로 모션을 편집하고, 마지막으로 결과물을 여러 포맷으로 내보냅니다. 생성 단계는 홈 화면에서 시작하는데, 디자인 시스템(59개 브랜드 팩)과 모션 프로필(Subtle에서 Cinematic까지)을 고르거나 그냥 문장만 입력할 수도 있습니다.
이 흐름에서 motion-anything이 강조하는 지점은 세 번째 단계입니다. 생성으로 끝나는 도구가 아니라, 만들어진 페이지를 실제로 띄워 놓고 그 위에서 모션을 다듬는 편집기를 함께 제공하기 때문입니다. 편집한 모션은 다시 파일에 반영되므로, 생성 결과가 고정된 산출물이 아니라 계속 손볼 수 있는 소스로 남습니다.
실행 중인 페이지에서 편집하는 워크벤치
워크벤치(Workbench)는 motion-anything의 핵심 화면입니다. 왼쪽에서 에이전트가 계획을 세우고 페이지를 생성하며 스스로 점검하는 동안, 오른쪽에는 실제로 실행되는 페이지가 뜹니다. 이 페이지에서 아무 컴포넌트나 클릭한 뒤 모션을 지정할 수 있는데, 지정 방식은 세 가지입니다. 애니메이션이 시작되는 시점을 정하는 4개의 트리거(On load, On scroll, On hover, On click), 미리 정의된 프리셋, 그리고 스크럽(scrub)과 자동 키프레임을 지원하는 6트랙 키프레임 에디터입니다. 화면 아래 타임라인은 한 화면이 절제 예산(restraint budget)을 넘어서면 경고를 띄웁니다.
motion-anything은 이 절제 예산을 하나의 기능으로 다룹니다. 개발팀은 AI가 만든 모션이 흔히 모든 요소가 한꺼번에 페이드인되거나 반대로 과한 효과가 쏟아지는 양극단으로 흐른다고 보고, 레시피마다 avoid_when 과 절제 예산을 선언하도록 했습니다. 편집기는 이 예산을 넘으면 경고하고, prefers-reduced-motion 설정을 항상 존중하며, GPU에 안전한 속성만 사용한다고 설명합니다. 워크벤치 화면의 에이전트 로그에도 reduced-motion · GPU-safe · one delight moment 를 스스로 확인하는 항목이 나타납니다.
기본으로 제공되는 모션 동사(motion verb)는 13개이고, 이징(easing)은 스프링(spring) 기반입니다. 트리거와 프리셋, 키프레임을 조합해 진입(entrance), 강조(emphasis), 주목(attention), 퇴장(exit) 같은 프리셋을 텍스트, 이미지, 영상, 도형 등 어떤 레이어에도 쌓을 수 있습니다.
motion-anything을 구동하는 8개 엔진과 BYOK
motion-anything은 특정 모델에 묶이지 않고, 사용자가 이미 쓰고 있는 에이전트를 그대로 불러 씁니다. PATH에서 자동 감지되는 CLI 8종과, Anthropic·OpenAI·Google API를 직접 호출하는 BYOK 모드를 지원합니다. 키는 사용자 컴퓨터를 벗어나지 않는다고 명시합니다.
| 엔진 | 제공처 | 전송 방식 |
|---|---|---|
| Claude Code | Anthropic | headless -p + stream-json |
| Codex CLI | OpenAI | exec --json 이벤트 스트림 |
| Cursor Agent | Cursor | stream-json |
| OpenCode | OpenCode | run --format json 이벤트 스트림 |
| Grok Build | xAI | 프롬프트 파일 기반 평문 |
| Hermes | xAI | ACP (stdio 위의 JSON-RPC) |
| Gemini CLI | 평문 | |
| Open Design Cloud | nexu.io | vela CLI를 통한 ACP |
| BYOK | Anthropic / OpenAI / Google | 사용자 키로 직접 API 호출 |
엔진 디스패치 로직은 저장소의 cli/bin/motion.js 한 파일에 들어 있습니다. stream-json, JSONL 이벤트, 평문, ACP, BYOK를 하나의 인터페이스 뒤로 묶어 처리합니다.
motion-anything의 레시피 라이브러리와 내보내기
라이브러리에는 403개의 모션 레시피가 들어 있습니다. 이 가운데 라이브 프리뷰가 있는 실제 효과가 77개이고, 나머지는 큐레이션된 레퍼런스 카드입니다. 분류는 앰비언트 배경(ambient backgrounds), 피드백과 디테일(feedback & delight), 인터랙션(interaction), 텍스트(text), 트랜지션(transitions)으로 나뉩니다. 저장소 소개에 따르면 라이브러리에서 눈에 띄는 효과 35개는 외부 소스를 의존성 없이 그대로 이식한 것으로, 출처와 허가는 ATTRIBUTION.md 에 기록되어 있습니다.
각 레시피는 하나의 폴더이고, recipe.motion.yaml, 자체 완결형 preview.html, 구현 파일, 그리고 SKILL.md 로 구성됩니다. 매니페스트에는 다른 곳에서 보기 어려운 세 필드가 들어 있습니다. 의도 키워드(intent_keywords), 쓰지 말아야 할 상황(avoid_when), 절제 수준(restraint) 입니다. 사용자는 라이브러리 이름을 알 필요 없이 "a liquid-metal background" 처럼 의도를 표현하고, 라우터가 큐레이션된 레시피 중에서 고르는 방식입니다. 타당성 계약은 MOTION-SPEC.md 에, 레시피 추가 방법은 AGENTS.md 에 정리되어 있습니다.
결과물은 여러 형태로 내보낼 수 있습니다. 컴포넌트의 모션은 JSON, CSS, React, Lottie로, 애니메이션 페이지 전체는 MP4(타임라인 프레임 캡처), GIF, 단일 파일 HTML로 내보내집니다. 개별 레시피는 다른 에이전트가 읽을 수 있는 이식형 SKILL.md 로도 내보낼 수 있습니다.
브라우저 안에서 렌더링하는 런치 영상 컴포지터
motion-anything에는 제품 런치 영상을 만들기 위한 캔버스 컴포지터가 함께 들어 있습니다. 텍스트, 도형, 이미지, 영상 레이어를 다루고, 실제 전환 효과가 붙는 다섯 개의 장면과 공유 필름 배경, 키네틱 타이포그래피를 지원합니다. MP4 내보내기는 브라우저 안의 WebCodecs로 처리하며, 워터마크가 없고 아무것도 업로드하지 않는다고 설명합니다. 영상 관련 코드는 app/video/ 에 있으며, MIT 라이선스의 mp4-muxer 와 gifenc 를 벤더링해 사용합니다.
motion-anything 설치 및 실행
motion-anything은 Node 18 이상과 지원 엔진 하나(자동 감지되는 CLI 또는 BYOK용 API 키)만 있으면 됩니다. npm install 단계가 없는데, 의존성이 없기 때문입니다.
git clone https://github.com/nexu-io/motion-anything.git
cd motion-anything
node cli/bin/motion.js serve 4399
# http://localhost:4399 접속
전체 클라이언트(워크벤치, 편집기, 라이브러리, 4개 언어 i18n)는 app/index.html 한 파일에 담겨 있고, 서버와 CLI는 앞서 언급한 cli/bin/motion.js 한 파일이 겸합니다. 셰이더 계열 레시피를 돌리는 의존성 없는 WebGL 러너는 recipes/web/_fx/shaderbg.js 로, 58줄짜리 파일입니다. 저장소는 코딩 에이전트가 따를 수 있는 작업 규약을 AGENTS.md 에, 진행 상태를 PROGRESS.md 에 두고 있습니다.
motion-anything과 Open Design 생태계
motion-anything은 독립 프로젝트가 아니라 Open Design 계열의 모션 층으로 설계되었고, 개발팀은 이 연동이 로고만 나열한 것이 아니라 실제로 맞물린다고 설명합니다. 모든 레시피가 Open Design 호환 SKILL.md 형식이라 230개의 이식형 스킬을 Open Design의 skills/ 나 스킬을 읽는 다른 에이전트에 그대로 넣을 수 있습니다. 생성은 Open Design의 DESIGN.md 형식으로 된 59개 브랜드 팩 위에서 시작해 처음부터 브랜드에 맞춰집니다.
라이브러리에는 58개의 HyperFrames 영상 템플릿과 112개의 HTML 프로토타입 템플릿이 함께 들어 있어, 입력한 브리프를 이들과 매칭해 빈 화면이 아니라 검증된 구조에서 출발하도록 합니다. 아이콘 라이브러리(2,680개)와 엔진 아이콘, 디자인 언어도 같은 계열에서 가져옵니다. Open Design을 구동하는 것과 같은 ACP 런타임 vela 가 motion-anything의 Open Design Cloud 엔진으로도 쓰입니다.
motion-anything의 라이선스
motion-anything은 Apache-2.0 라이선스로 공개되어 있어 개인 및 상업적 목적으로 자유롭게 사용할 수 있습니다. 라이브러리에 포함된 제3자 소스와 그 허가 조건은 별도로 ATTRIBUTION.md 에 기록되어 있습니다.
motion-anything GitHub 저장소
Open Design 프로젝트 (nexu.io)
더 읽어보기
이 글은 GPT 모델로 정리한 글을 바탕으로 한 것으로, 원문의 내용 또는 의도와 다르게 정리된 내용이 있을 수 있습니다. 관심있는 내용이시라면 원문도 함께 참고해주세요! 읽으시면서 어색하거나 잘못된 내용을 발견하시면 덧글로 알려주시기를 부탁드립니다. 
파이토치 한국 사용자 모임
이 정리한 이 글이 유용하셨나요? 회원으로 가입하시면 주요 글들을 이메일
로 보내드립니다! 텔레그램(Telegram)이나 Slack/Discord/Teams/Dooray/GoogleChat 등으로도 새 글 알림을 받으실 수 있습니다. 
아래
쪽에 좋아요
를 눌러주시면 새로운 소식들을 정리하고 공유하는데 힘이 됩니다~ 