Pixel2motion
Turn a raster logo (PNG/JPG/WebP/screenshot) into a clean minimal SVG with edge...
Install
npx skills add nolangz/pixel2motion --skill pixel2motion -g -a claude-code -y- Repository
- nolangz/pixel2motion2.6k
- Category
- Design
- Updated
- 3mo ago
- License
- MIT
- Context cost
- Mediumabout 3,000 tokens
- Runs scripts
- No, instructions only
What it does
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).
Pixel2Motion (v2)
Pixel → Vector → Motion. This skill fuses two disciplines:
- Vectorization discipline (from logo-vectorizer-minimal-smooth): fit the raster source with the lowest-complexity editable geometry that passes visual QA.
- 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 hooksmotion_spec.md, personality words, principles applied, timeline table, easing tokens, atomic motions, tunable controlsoutputs/fit_iterations/*.png+overlay_progress_strip.png, geometry QA evidenceoutputs/motion_frames/*.png+motion_strip.png, motion QA evidencefinal_render.png,html_render.png, static renders; path audit artifacts when smoothness was a concern
