oil-oil/oil-motion

Web animation skill for Claude Code & Codex. 帮你做跟着滚动和鼠标动的网页动画。

Oil Motion이란 무엇인가?

Oil Motion은 웹 페이지를 위한 인터랙티브하고 AI로 생성된 애니메이션을 만들 수 있는 도구입니다. CSS, JavaScript를 작성하거나 비디오 자산을 수작업으로 제작하는 대신, 원하는 동작을 설명하고 소스 이미지나 비디오를 제공하면 시스템(이하 에이전트라고 함)이 다음을 수행합니다:

키 프레임 설계 – 애니메이션의 구조를 정의하는 중요한 "시작", "중간", "끝" 이미지.
AI 비디오 모델로 중간 모션 생성.
결과 프레임 정리, 압축 및 패키징 – 웹 친화적인 형식(MP4, WebP 스프라이트 시트 등)으로 변환.
사용자 입력에 애니메이션 연결 – 스크롤, 마우스 이동, 드래그, 터치 또는 기기 방향에 따라 실시간으로 반응하도록.

전체 파이프라인은 AI 에이전트 플랫폼에 설치할 수 있는 스킬로 패키징됩니다(예: npx skills add oil-oil/oil-motion). 설치 후, 에이전트에게 단일 자연어 명령으로 완전한 인터랙티브 애니메이션을 생성하도록 요청할 수 있습니다.

누가 사용할까요?

제품 마케터 – 방문자가 스크롤할 때 확장되는 제품 분해도를 원하는 경우.
게임 또는 캐릭터 디자이너 – 캐릭터의 얼굴이 커서를 따라가야 하는 경우.
기술 문서 작성자 – WebGL 코드를 작성하지 않고 장치의 3D 같은 워크스루를 원하는 경우.
프론트엔드 팀 – 수십 개의 프레임을 수동으로 그리는 대신 AI 생성 자산을 선호하는 경우.

CSS/JS로 처리할 수 있는 간단한 UI 전환(버튼 호버, 모달 페이드인)이나 전체 길이 비디오 편집에는 적합하지 않습니다.

어떻게 작동하나요?

목표 정의 – 사용자가 에이전트에게 원하는 효과, 입력 미디어 및 제어 방법(스크롤, 마우스 등)을 알려줍니다.
키 프레임 확인 – 에이전트가 먼저 몇 가지 중요한 프레임을 생성하고 주제, 스타일 및 구성이 일관되게 유지되는지 확인합니다.
모션 생성 – AI 비디오 모델(ZenMux 서비스를 통해 액세스)이 키 프레임 사이를 보간하는 프레임을 생성합니다.
후처리 – 에이전트가 일시 중지, 중복 프레임 및 시각적 결함을 제거한 다음 결과를 적절한 형식으로 압축합니다:
- 내러티브 샷을 위한 전체 장면 MP4.
- 작은 2D 자산을 위한 알파 WebP 스프라이트 시트.
- 크고 스크롤 기반 시퀀스를 위한 그린 스크린 MP4.
내보내기 – 바로 삽입할 수 있는 JavaScript 번들, 구성 파일 및 최적화된 미디어가 미리보기 페이지와 함께 생성됩니다.

모든 무거운 작업(AI 생성, 압축)은 오프라인에서 이루어집니다. 브라우저는 사전 생성된 프레임 내에서만 탐색하므로 부드럽고 지연 시간이 낮은 상호 작용을 보장합니다.

저장소에는 무엇이 포함되어 있나요?

항목	용도
`SKILL.md`	스킬의 명령, 입력 및 출력 사양.
`references/`	API 키 설정, ZenMux 통합 및 기타 기술 세부 사항에 대한 문서.
`assets/readme/hero.svg`	README용 시각적 배너.
라이선스	MIT – 무료 사용 및 수정 가능.

저장소에는 AI 모델 자체가 포함되어 있지 않습니다. 이미지/비디오 생성을 위해 외부 ZenMux 서비스(API 키로 액세스)에 의존합니다.

어떻게 시작하나요?

스킬 설치 – 에이전트에게 요청하거나(帮我安装 …) npx skills add oil-oil/oil-motion을 실행합니다.
API 키 제공 – 일회성 구성 페이지(Node 22+)가 OS 자격 증명 저장소에 키를 저장합니다.

자연어 요청 – 예:

使用 oil-motion，把这两张产品图制作成随页面滚动逐步展开的动画。

에이전트는 다음을 수행합니다:
- 키 프레임 생성/검증,
- ZenMux를 호출하여 모션 생성,
- 자산 정리 및 압축,
- 삽입 가능한 애니메이션 번들 출력.

제한 사항 및 범위

주제가 모양이나 포즈를 변경해야 하는 경우(제품 분해, 캐릭터 회전, 카메라 플라이스루)에 가장 적합합니다.
간단한 CSS/JS 전환, 정적 이미지 갤러리 또는 전체 길이 비디오 편집에는 적합하지 않습니다.
외부 AI 비디오 서비스(ZenMux)가 필요하며 생성당 사용 비용이 발생합니다.
에이전트는 근본적으로 잘못된 모션 디자인을 수정할 수 없습니다. 키 프레임이나 프롬프트를 수정해야 합니다.

요약

Oil Motion은 설명과 소스 미디어를 스크롤, 마우스 또는 터치 제어 애니메이션으로 변환하는 AI 기반 파이프라인으로, 웹에 바로 사용할 수 있습니다. 스킬로 설치하고 API 키를 제공한 다음 에이전트에게 애니메이션 생성을 요청하면 시스템이 키 프레임 설계, AI 비디오 생성, 정리, 압축 및 코드 통합을 처리합니다.