oil-oil/oil-motion

设计并实现随滚动、拖动、指针或状态变化响应的网页动画，覆盖素材、时间轴和运行时。

무엇인가요

Oil Motion은 AI 에이전트가 재사용 가능한 Skill로 사용할 수 있도록 인터랙티브 웹 애니메이션 생성을 자동화하는 도구입니다. 에이전트는 디자인 요약(무엇을 보여줘야 하는지, 어떤 자산이 있는지, 사용자 상호작용(스크롤, 마우스, 터치, 기기 기울기)이 애니메이션을 제어할지)을 입력받아 3단계 파이프라인을 실행합니다:

핵심 프레임 정의 – 에이전트는 제품 전체, 분해도, 최종 상태와 같은 핵심 이미지를 생성하고, 주제, 스타일, 구성이 일관성을 유지하는지 확인합니다.
중간 움직임 생성 – AI 비디오 모델이 핵심 프레임 사이를 부드럽게 전환하는 연속된 클립을 생성합니다.
웹용 후처리 – 비디오는 자르고, 중복 제거, 압축하여, 크기, 투명도 요구 사항, 기기 제약에 따라 MP4 또는 알파 WebP 스프라이트 시트로 재패키징됩니다. 결과 리소스는 페이지에 직접 연결되어 스크롤, 마우스 움직임, 드래그, 터치, 기기 방향이 애니메이션 진행에 매핑됩니다.

누구에게 유용한가요

수천 개의 프레임을 수작업으로 만들지 않고도 고품질의 AI 생성 제품 데모, 캐릭터 상호작용, 데이터 기반 전환을 원하는 프론트엔드 개발자.
개념 예술이나 제품 사진을 보유하고 있으며, 빠르게 '스크롤로 노출' 또는 '마우스 따라가기' 애니메이션을 원하는 디자이너.
AI 기반 어시스턴트를 구축 중인 팀으로, 이 스킬을 설치한 후 특정 애니메이션을 요청하면 즉시 생성할 수 있도록 하고 싶은 경우.

핵심 개념

개념	의미
스킬	AI 에이전트가 설치할 수 있는 플러그인 (`npx skills add oil-oil/oil-motion`). 에이전트는 모든 생성, 검증, 패키징 단계를 처리합니다.
핵심 프레임	애니메이션의 시작, 중요한 중간 상태, 종료를 정의하는 보장된 안정적인 이미지의 소수.
연속된 움직임	AI 비디오 모델이 핵심 프레임 사이의 간격을 채워 부드러운 클립을 생성합니다.
리소스 형식	사용 사례에 따라 출력은 전체 프레임 MP4, 그린스크린 MP4(웹글로브 크로마키 처리용), 또는 알파 WebP 스프라이트 시트 중 하나입니다.
제어 매핑	사용자 입력(스크롤 오프셋, 마우스 X/Y, 터치 드래그, 기기 방향)이 프레임 인덱스 또는 재생 속도로 변환됩니다.

시작하기

스킬 설치 – AI 어시스턴트에게 리포지토리 설치를 지시하거나 다음 명령어를 실행합니다:
```
npx skills add oil-oil/oil-motion
```

프롬프트 제공 – 에이전트에게 자산과 구체적인 요청을 제공하거나, 먼저 옵션을 설계하도록 요청할 수 있습니다. 예시:

$oil-motion를 사용하여 이 두 개의 제품 이미지를 페이지 스크롤에 따라 점진적으로 전개하는 애니메이션으로 제작하세요.
데스크톱 환경에서는 표시 영역이 크므로 명확한 품질을 유지해야 하며, 모바일에서는 가벼운 리소스를 사용해야 합니다.

에이전트가 파이프라인 실행 – 핵심 프레임 생성, 선택된 AI 비디오 서비스 호출, 영상 정리, 압축, 설정 파일 및 바로 삽입 가능한 코드 생성.
생성된 코드 삽입 – 스킬은 선택된 입력(예: window.scrollY)을 애니메이션 타임라인에 바인딩하는 작은 자바스크립트 스니펫을 출력합니다.

필요 조건

Python (AI 비디오 서비스와 통신하고 FFmpeg를 실행하는 백엔드 스크립트용).
FFmpeg – 자르기, 프레임 수준 검사, 압축에 사용됩니다.
선택한 AI 비디오 생성 제공자의 API 키 (스킬은 keyring을 통해 안전하게 저장).
Node.js 22.18 이상 (옵션 설정 UI용).
scripts/requirements.txt에 기재된 Python 종속성 (pip install -r scripts/requirements.txt로 설치).

제공되는 것들

검증된 핵심 프레임과 생성된 프롬프트.
대상 기기용으로 최적화된 정리된 비디오 또는 WebP 스프라이트 시트.
상호작용 매핑, 리소스 URL, 백업 정적 이미지를 설명하는 JSON/YAML 설정 파일.
어떤 웹 페이지에도 가져와 애니메이션을 제어할 수 있는 작은 프론트엔드 헬퍼.

내장된 품질 검사

프레임 간 주제, 비율, 조명의 일관성.
정지, 중복 프레임, 시각적 결함 제거.
투명한 자산용 에지 클리어 알파.
성능 가드레일 – 선언된 표시 크기를 충족하면서도 가장 작은 리소스를 선택.
애니메이션 로드 실패 또는 모션 비활성화 시 백업 정적 프레임 제공.

라이선스

MIT – 생성된 자산을 상업 프로젝트에 자유롭게 사용, 수정, 임베딩할 수 있습니다 (하위 AI 비디오 서비스의 이용 조건에 따라 다릅니다).