pixel2motion

Converts static bitmap logos into animatable SVGs and generates logo animations exported as HTML, GIF, or video.

Updated Jun 17, 2026
One-click install
npx skills add https://github.com/KKChen666/TongXiao --skill pixel2motion-kkchen666
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: pixel2motion
Source: https://github.com/KKChen666/TongXiao/tree/main/.opencode/skills/pixel2motion
Command: npx skills add https://github.com/KKChen666/TongXiao --skill pixel2motion-kkchen666

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Static bitmap logos cannot be animated directly, and manually redrawing them as SVG paths and scripting animations is slow and error-prone. This Skill automates the conversion of raster logos into clean, animatable SVG paths and generates smooth entrance or reveal animations without manual keyframing. ## Core Features & Use Cases - Bitmap-to-SVG Reconstruction: Rebuilds PNG, JPG, or BMP logos as clean, layered SVG paths while preserving visual fidelity. - Automated Animation Generation: Orchestrates smooth logo reveal animations with configurable direction, timing, and easing. - Multi-Format Export: Produces dependency-free interactive HTML, GIF previews, MP4/WebM video, and editable SVG source files. - Use Case: A marketing team needs an animated version of their company logo for a website hero section and social media posts. Provide the PNG logo, and receive an interactive HTML embed plus a GIF for social channels. ## Quick Start Animate the attached logo.png file into a smooth reveal animation and export it as an interactive HTML file with a GIF preview.

Frequently Asked Questions about pixel2motion

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I animate a static logo image?

Provide a bitmap logo file such as PNG or JPG, and the Skill reconstructs it as clean SVG paths, then generates a smooth entrance or reveal animation. You receive an interactive HTML file plus GIF or video previews.

How to convert a PNG logo to an animated SVG?

The Skill analyzes the logo structure, vectorizes it into layered SVG paths, and applies an automated animation sequence. The output includes editable SVG source so you can fine-tune paths or keyframes manually afterward.

What image formats work best for logo vectorization?

High-contrast PNG or JPG images with clean backgrounds, white or transparent, produce the cleanest SVG extraction. Simple logos convert more accurately than complex illustrations or photographic elements.

Can I embed the animated logo in a React or Vue app?

Yes, the exported SVG source can be integrated as a component in React, Vue, or Angular applications. The interactive HTML export is self-contained with no dependencies and can be embedded directly in websites.

What are the limitations of automated logo animation?

Complex photographic elements and detailed textures may be simplified during vectorization. The animation style is automated, so custom keyframes require manual editing of the exported SVG or HTML.