Skip to content

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/pixel2motion

Install command taken from the project's README or registry entry. Always review code before running it.

www.pixel2motion.com

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…