An AI skill that provides design intelligence for building professional UI/UX across multiple platforms.
Pixel2motion
AI logo animation skill: turn raster logos into smooth SVG animation, animated HTML demos, GIF/video previews, and motion QA evidence.
Install
git clone https://github.com/nolangz/pixel2motionInstall command taken from the project's README or registry entry. Always review code before running it.
README excerpt
Read full README on GitHub →Better commercial Pixel2Motion services are coming online: polished logo-to-motion workflows, project-ready previews, and production support beyond the open-source skill.
中文:更完整的 Pixel2Motion 商业服务正在上线,面向更稳定的 logo-to-motion 交付、预览和项目支持。
Pixel2Motion - AI Logo Animation Skill
Raster logo → smooth minimal SVG → SVG logo animation → interactive HTML motion demo.
Commercial preview · Live interactive demo · Skill instructions · Companion skill: Pixel2SVG-HTML
Pixel2Motion is an open-source Codex and Claude skill for logo animation, SVG animation, and AI-assisted brand motion. It turns PNG, JPG, WebP, or screenshot logos into clean motion-ready SVG, then exports animated logo HTML, GIF/video previews, and motion QA evidence. Use it for animated logos, SVG logo reveals, logo motion design, pixel-to-vector reconstruction, and developer-friendly HTML animation workflows.
中文:Pixel2Motion 是一个把像素 logo 转成平滑 SVG,再生成品牌 motion、logo reveal、HTML 动效展示和视频预览的 Codex skill。它适合需要可审查矢量拟合、可复用 SVG 结构和可导出动图/透明视频的设计与开发场景。
Recommended review order: the motion gallery below, the commercial preview, the interactive demo, the fitting evidence, and then the implementation workflow.
Pixel-to-Motion Gallery
Each pairing shows the raster source next to the motion output, rendered from docs/index.html at the animation's default speed: Horizon 1900 ms, Continuum 2000 ms, Focus 1700 ms, N 2400 ms, and CueRecord at the page-default 0.65× custom timeline.
Motion output
</td>
<td align="center" width="50%">
<strong>Continuum</strong>
Pixel source
Motion output
</td>
Motion output
</td>
<td align="center" width="50%">
<strong>N</strong>
Pixel source
Motion output
</td>
Motion output
</td>
<td align="center" width="50%"></td>
Commercial Preview
The full interactive showcase lives in docs/index.html and is published through GitHub Pages at nolangz.github.io/pixel2motion. A more polished commercial Pixel2Motion service is coming online at www.pixel2motion.com, with project-ready previews and production support beyond the open-source skill.
Fitting Evidence
Every animation is authored against a QA-verified static vector. The CueRecord fitting sequence, read left to right:
The teal overlays are QA checkpoints, not the deliverable: the vector candidate is repeatedly compared against the raster source until mark scale, dot placement, wordmark baseline, and ink weight hold up — and only then is motion authored on top. The resulting clean semantic SVG, with mark, dot, and wordmark as separate addressable parts, becomes the final-frame contract for the animation.
Similar plugs
Turn any codebase, with its docs, SQL schemas, configs, and PDFs, into a queryable knowledge graph. A /graphify skill for Claude Code, Cursor, Codex, and Gemini CLI: local…
The 1st Collaborative AI Design Agent Workspace. Local-first and open source. Create prototypes, websites, apps, dashboards, presentations, images, and videos with your team…
Persistent Context Across Sessions for Every Agent – Captures everything your agent does during sessions, compresses it with AI, and injects relevant context back into future…
Agent skills that give coding agents taste: art direction, reference images and a browser check instead of generic AI pages
Turn any idea, plan, or codebase into a beautiful interactive diagram. An agent skill for Claude Code, Codex, and more.