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.