nolangz/pixel2motion

Pixel2Motion is a skill for AI coding agents (specifically Codex and Claude) that takes a logo image and turns it into an animated version. You give it a PNG, JPG, or WebP file containing a raster logo (a regular pixel-based image), and it converts that into a clean vector graphic, then adds motion to produce an animated logo you can use on a website or export as a GIF or video. The process works in two stages. First, the skill reconstructs the logo as an SVG, which is a file format that describes shapes mathematically rather than as pixels. This matters for animation because individual parts of the logo (the icon, a dot, the text) can be addressed and moved independently. The skill runs quality checks comparing the reconstructed vector against the original image to confirm the shapes align correctly before moving on. A smooth vector that captures the logo's structure is accepted over a more exact but jagged trace. Second, the skill authors animation using CSS, the same styling language used to design web pages. The result is a self-contained HTML file that shows the logo animating, with controls for replay, slow motion, and speed adjustment. Python scripts then capture screenshots at specific moments during the animation to produce a visual record showing exactly what the animation looks like at each stage. These frame captures act as quality assurance evidence rather than the final deliverable. The full set of outputs includes the vector SVG file, the CSS animation file, the interactive HTML demo, a motion specification document describing the design decisions, overlay images from the fitting process, and a strip of frames from the animation. All of this is generated locally and kept out of version control. Running the skill requires Python 3.10 or later, the Pillow and NumPy libraries for image work, and a Chromium browser controlled by Playwright for rendering the HTML and capturing frames. The repository includes scripts for each step of the workflow and a companion project called Pixel2SVG-HTML that covers the vector fitting methodology in more detail.