# Pixel2motion

Turn a raster logo (PNG/JPG/WebP/screenshot) into a clean minimal SVG with edge...

- Repository: https://github.com/nolangz/pixel2motion (2563 stars)
- Category: Design
- License: MIT
- Last updated: 2026-08-21
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add nolangz/pixel2motion --skill pixel2motion -g -a claude-code -y`
Codex: `npx skills add nolangz/pixel2motion --skill pixel2motion -g -a codex -y`
Cursor: `npx skills add nolangz/pixel2motion --skill pixel2motion -g -a cursor -y`
Gemini CLI: `npx skills add nolangz/pixel2motion --skill pixel2motion -g -a gemini-cli -y`

## Description

Turn a raster logo (PNG/JPG/WebP/screenshot) into a clean minimal SVG with edge smoothness as the primary hard gate and IoU optimized as high as reasonably possible without a fixed global threshold, then into a choreographed logo animation delivered as standalone JS-rendered HTML, applying Disney's 12 animation principles. Use when asked to animate a logo, build a logo reveal / splash screen / brand intro, convert a logo image into animated SVG or HTML, add motion to a vectorized mark, or create loading/idle/hover motion for a brand mark. v2: also handles self-crossing draw-on choreography (split-fill, exact easing subdivision, tip glint), closed variable-width ribbon fitting, and quantitative motion QA (easing probe, ink-delta continuity sweep).

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# Pixel2Motion (v2)

**Pixel → Vector → Motion.** This skill fuses two disciplines:

1. **Vectorization discipline** (from logo-vectorizer-minimal-smooth): fit the raster source with the *lowest-complexity* editable geometry that passes visual QA.
2. **Motion discipline** (from Disney's 12 Principles of Animation): choreograph that geometry into brand-appropriate motion with evidence-based timing and easing.

The fusion rests on one insight: **minimal smooth geometry IS animatable geometry**. A logo built from 3 semantic parts animates cleanly; a logo built from 400 pixel-stair traced points cannot be choreographed or accepted as a professional logo vector. Phase 2 therefore does not merely vectorize, it *structures for motion*. And the animation must always land exactly on the QA-verified static vector (the **Final Frame Contract**).

## Deliverables

- `logo.svg`, final static vector (motion-ready structure)
- `logo_motion.html`, showcase-style standalone HTML with the main animation, atomic motion studies, replay/slow/speed controls, and QA hooks
- `motion_spec.md`, personality words, principles applied, timeline table, easing tokens, atomic motions, tunable controls
- `outputs/fit_iterations/*.png` + `overlay_progress_strip.png`, geometry QA evidence
- `outputs/motion_frames/*.png` + `motion_strip.png`, motion QA evidence
- `final_render.png`, `html_render.png`, static renders; path audit artifacts when smoothness was a concern

---

## Phase 1, PIXEL: Read the source, write the brief

The rest: https://github.com/nolangz/pixel2motion/blob/HEAD//SKILL.md