nolangz/pixel2motion

AI logo animation skill: turn raster logos into smooth SVG animation, animated HTML demos, GIF/video previews, and motion QA evidence.

해결하는 문제

Pixel2Motion은 정적 라스터 로고(PNG, JPG, WebP)를 전문적인 애니메이션 SVG 로고로 변환하는 과정을 단순화합니다. 로고를 벡터로 다시 만들고 모션을 안무하는 수작업을 없애고, AI 지원 브랜드 모션 디자인을 위한 구조화된 워크플로를 제공합니다.

작동 방식

이 프로젝트는 Claude와 Codex와 같은 AI 모델을 위한 "skill"로 동작하며, 다단계 파이프라인을 안내합니다:

  1. 벡터화: 라스터 로고를 깨끗하고 의미론적인 SVG로 변환하여 로고의 다양한 부분(마크, 점, 워드마크)을 개별적으로 주소 지정할 수 있게 합니다.
  2. 피팅 & QA: Python 스크립트를 사용해 벡터 후보를 원본 라스터 소스와 오버레이하여 정밀한 정렬, 스케일, 잉크 두께를 보장합니다.
  3. 안무: SVG ID를 대상으로 CSS 애니메이션을 생성해 "로고 리빌" 또는 모션 시퀀스를 만듭니다.
  4. 전달: 최종 결과물을 의존성 없는 HTML 쇼케이스로 내보내고, GIF/비디오 미리보기와 모션 QA 증거를 함께 제공합니다.

대상 사용자

  • 브랜드 디자이너: 애니메이션 로고를 빠르게 프로토타입하고 싶은 사람.
  • 개발자: 개발자 친화적인 HTML/CSS 기반 애니메이션 워크플로를 찾는 사람.
  • AI 모션 디자이너: LLM을 활용해 브랜드 자산 제작을 지원하고 싶은 사람.

주요 특징

  • QA 검증 피팅: IoU 진단 및 기하학적 오버레이를 사용해 벡터 버전이 원본을 충실히 재구성했는지 확인합니다.
  • 결정적 프레임 캡처: 품질 보증을 위해 특정 모션 프레임을 캡처하는 스크립트를 포함합니다.
  • 시맨틱 SVG 구조: 출력 SVG가 애니메이션을 위해 특별히 구조화되어 있어 단순 평면 트레이스가 아닙니다.
  • 인터랙티브 HTML 데모: 속도 제어와 재생 기능을 갖춘 독립형 HTML 파일을 생성해 애니메이션 검토를 용이하게 합니다.