Pixel2Motion

Install

npx skillfoxx add skills/pixel2motion

npx skills add nolangz/pixel2motion --skill pixel2motion -a claude-code -y

npx skills add nolangz/pixel2motion --skill pixel2motion -a cursor -y

npx skills add nolangz/pixel2motion --skill pixel2motion -a github-copilot -y

npx skills add nolangz/pixel2motion --skill pixel2motion -a codex -y

npx skills add nolangz/pixel2motion --skill pixel2motion -a gemini-cli -y

npx skills add nolangz/pixel2motion --skill pixel2motion -a cline -y

npx skills add nolangz/pixel2motion --skill pixel2motion -a roo -y

npx skills add nolangz/pixel2motion --skill pixel2motion -a opencode -y

git clone https://github.com/nolangz/pixel2motion.git ~/.claude/skills/pixel2motion

This is third-party code. Review the repository files before installing.

What it does

The skill walks a logo through pixel, vector, motion. It first reads the raster source and writes a motion brief, then builds minimal smoothed SVG geometry that is ready to animate, and lands the animation on a static final frame. Outputs are the SVG, a standalone HTML with the animation and controls, a motion spec and QA frames. Timing and motion principles follow Disney's 12 principles of animation. Rendering frames and checking continuity use python scripts and a headless browser.

Who it is for. For designers and developers who need a clean logo animation from a raster image.

Example request

Take this PNG logo and build a logo animation in HTML with a reveal

Limitations

Rendering frames and motion QA need python, Pillow, numpy, Playwright and Chromium. The skill targets minimal geometry: a very complex or noisy source will need manual simplification.

How to disable. Remove the pixel2motion folder from the agent's skills directory and, if you wish, the local .venv environment.

Security check

• The skill runs python scripts and a headless browser for rendering and QA
• It requires setting up a local environment and a browser

README in short

The README presents Pixel2Motion as a Codex and Claude skill that turns a raster logo into a smoothed SVG and then into motion: an HTML demo, GIF or video previews and QA artifacts. It shows the workflow with scripts to build the HTML, capture frames and probe risky motion windows. Requirements list python 3.10+, Pillow and numpy, Chrome or Chromium and Playwright, with a recommended env setup and a CHROME_BIN variable. MIT licensed.

SKILL.md

---
name: pixel2motion
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)."
---

# 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

1. **Analyze the raster source.** Record image size, mode, alpha, foreground colors, background (transparent/solid). Identify the *semantic parts*: mark vs wordmark, individual letters, dots, swooshes, containers, negative space. Each part is a future actor in the animation.
2. **Write the motion brief** before touching geometry:
   - **Personality**: 3 brand motion words (e.g. "swift, precise, confident"). Derive from the logo's own visual language (geometric = engineered motion, organic = flowing motion, rounded = soft/bouncy) plus any user-stated brand context. See `references/motion-personality.md` to map words → timing scale, easing tokens, principle emphasis.

Related