pixel2motion: turn a raster logo into smooth SVG, then animate it

npx skills add nolangz/pixel2motion --skill pixel2motion

You have a PNG logo and want an intro animation. Animating the bitmap blurs when it scales, and an auto-tracer hands back a path with hundreds of jagged nodes that you can’t choreograph part by part. pixel2motion, an agent skill from nolangz on GitHub (MIT, created June 12, 2026, about 2.4k stars as of October 8, 2026), installs into Claude Code or Codex and has the agent fit the bitmap to clean SVG first, then animate that vector, and finally hand back an HTML page you can replay and slow down.

The order it works in

pixel2motion splits a job into three phases: read the bitmap, fit the vector, then author the motion.

Reading the bitmap means breaking the logo into actors: mark versus wordmark, each letter, the dot, the swoosh. The agent then writes a motion brief to motion_spec.md: three personality words, the usage context (splash, header, loading, hover) and a choreography sketch. Every duration and easing value later has to trace back to that brief.

Fitting the vector starts at the simplest geometry: circles, ellipses, rectangles, then a few cubic Béziers, with traced paths as the last resort. Each geometry change gets a cyan overlay on the source and a recorded IoU. The budget is 10 iterations; the loop ends on an accepted fit or ships the best of the ten.

Authoring the motion splits a reveal 20% anticipation, 50% action, 30% follow-through, staggers the parts so nothing starts or stops on the same frame, and writes easing as literal cubic-bezier values. The skill explains why: a var() timing function inside @keyframes is silently dropped in Chromium, and the motion falls back to linear.

What it constrains

• Smoothness over IoU: stair-stepped edges, noisy knots or pixel-grid runs fail the fit even at a high IoU. A slightly lower IoU with a smooth curve wins, and the trade-off is recorded in motion_spec.md.
• One id per part: #mark, #wordmark, #dot are separate elements, animations target ids rather than nth-child, and draw-on paths carry pathLength="1".
• The last frame equals the static vector: ?static=1 and ?t=<ms> are captured with the same tool and must match exactly.
• Evidence on disk: overlays, a motion_strip.png frame strip, an easing probe and a continuity sweep, not “looks fine to me”.

Who it’s for

A designer or front-end developer who has only a bitmap logo and wants an SVG animation that drops into a page: a brand splash, a hero, an app launch screen. It sits in the same family as srt-whiteboard-animation, where an agent follows a pipeline to make motion, but the target differs. That skill draws subtitles into a hand-drawn video; this one handles a single logo and ships code, not an MP4.

The limits, plainly. First, you need Python 3.10+, Pillow, numpy and Chrome or Chromium locally, plus Playwright for frame capture, so it isn’t a one-file drop-in. Second, the overlay checks rely on the agent looking at images, so a model without vision loses half the QA. Third, the README opens by promoting commercial services at pixel2motion.com, promising steadier delivery and project support. The open-source skill is free, but the repo doesn’t say how the two relate. Fourth, every sample is a geometric mark (Horizon, CueRecord); the repo shows nothing for complex gradients or photographic marks, so test your own logo first.

The CueRecord sample is typical of the geometric marks it shows: the C-shaped arc draws on, the red dot drops in, and the wordmark unfolds.