vibe-motion/skills
agent skills for vibe motion
해결하는 문제
이 프로젝트는 AI 에이전트(예: Claude Code)에 통합할 수 있는 '스킬'(모듈식 애니메이션 및 렌더링 도구)의 컬렉션을 제공하여 고품질 시각 효과, 모션 그래픽, 프로그래밍 기반 애니메이션의 자동 생성을 가능하게 합니다. 텍스트 기반 AI 프롬프트와 프로페셔널 수준의 비디오/SVG/HTML 렌더링 사이의 격차를 메웁니다.
작동 방식
사용자는 인터랙티브 스크립트(npx skills add vibe-motion/skills)를 통해 이 스킬들을 설치합니다. 설치 후 AI 에이전트는 사용자 요청에 따라 특정 시각적 출력을 생성하기 위해 이러한 도구를 트리거할 수 있습니다. 라이브러리는 다양한 전문 렌더러를 포함합니다:
- 비디오 및 모션: Remotion을 사용한 브랜드 런칭 비디오, 3D 티커, 레코드 플레이어, 금융 캔들스틱 차트용 도구.
- 벡터 및 SVG: 픽셀 기반 로고를 애니메이션 가능한 SVG로 변환하는 도구(
pixel2motion). - 3D 및 시뮬레이션: Three.js 지구 경로, 3D 클라드니 입자, p5.js 커튼 시뮬레이션용 렌더러.
- UI/UX 애니메이션: 타이핑 효과, 자물쇠 프로그레스 바, 스포트라이트 리베일 효과용 도구.
대상 사용자
AI 기반 워크플로우를 통해 복잡한 프로그래밍 기반 애니메이션과 브랜드 자산을 빠르게 생성하고자 하는 모션 디자이너, 개발자, AI 에이전트 사용자.
주요 특징
- 에이전트 호환: Claude Code와 같은 AI 에이전트에 쉽게 추가할 수 있도록 설계됨.
- 다양한 시각적 표현: 3D 입자 시스템과 글로벌 비행 경로부터 금융 차트, 브랜드 프로모션 비디오까지 포괄.
- SVG 변환: 정적 로고를 애니메이션 대응 벡터 그래픽으로 변환하는 전용 워크플로우 포함.
- 애니메이션 원칙: 코드 기반 움직임에 디즈니의 12가지 애니메이션 원칙을 적용하여 더 자연스러운 움직임 구현.
관련
- 프로젝트
- 프로젝트
- 프로젝트
- 프로젝트
- 프로젝트