nolangz/pixel2motion

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

What it solves

Pixel2Motion simplifies the process of turning static raster logos (PNG, JPG, WebP) into professional, animated SVG logos. It eliminates the manual effort of recreating a logo as a vector and then choreographing its motion, providing a structured workflow for AI-assisted brand motion design.

How it works

The project operates as a "skill" for AI models like Claude and Codex, guiding them through a multi-step pipeline:

  1. Vectorization: It converts the raster logo into a clean, semantic SVG where different parts of the logo (mark, dot, wordmark) are addressable.
  2. Fitting & QA: It uses Python scripts to overlay the vector candidate against the original raster source to ensure precise alignment, scale, and ink weight.
  3. Choreography: It generates CSS animations targeting the SVG IDs to create a "logo reveal" or motion sequence.
  4. Delivery: It exports the final result as a dependency-free HTML showcase, along with GIF/video previews and motion QA evidence.

Who it’s for

  • Brand Designers who need to quickly prototype animated logos.
  • Developers looking for a developer-friendly, HTML/CSS-based animation workflow.
  • AI Motion Designers using LLMs to assist in the creation of brand assets.

Highlights

  • QA-Verified Fitting: Uses IoU diagnostics and geometry overlays to ensure the vector version is a faithful reconstruction of the original.
  • Deterministic Frame Capture: Includes scripts to capture specific motion frames for quality assurance.
  • Semantic SVG Structure: Ensures the output SVG is structured specifically for animation, rather than just a flat trace.
  • Interactive HTML Demos: Produces standalone HTML files with speed controls and replay functionality for reviewing animations.