Pixel2motion

Turn a raster logo (PNG/JPG/WebP/screenshot) into a clean minimal SVG with edge smoothness as the primary hard gate and IoU optimized as high as reasonably possible without a fixed global threshold, then into a choreographed logo animation delivered as standalone JS-rendered HTML, applying Disney's 12 animation principles. Use when asked to animate a logo, build a logo reveal / splash screen / brand intro, convert a logo image into animated SVG or HTML, add motion to a vectorized mark, or create loading/idle/hover motion for a brand mark. v2: also handles self-crossing draw-on choreography (sp

2,558 stars 212 forksFrontend & Design

Install

skills CLI (Claude Code, Cursor, Codex and more)

npx skills add nolangz/pixel2motion --skill pixel2motion

Manual install

git clone --depth 1 https://github.com/nolangz/pixel2motion.git /tmp/pixel2motion
mkdir -p ~/.claude/skills
cp -r /tmp/pixel2motion/. ~/.claude/skills/pixel2motion

Personal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.

From the SKILL.md

# Pixel2Motion (v2)

**Pixel → Vector → Motion.** This skill fuses two disciplines:

1. **Vectorization discipline** (from logo-vectorizer-minimal-smooth): fit the raster source with the *lowest-complexity* editable geometry that passes visual QA.
2. **Motion discipline** (from Disney's 12 Principles of Animation): choreograph that geometry into brand-appropriate motion with evidence-based timing and easing.

The fusion rests on one insight: **minimal smooth geometry IS animatable geometry**. A logo built from 3 semantic parts animates cleanly; a logo built from 400 pixel-stair traced points cannot be choreographed or accepted as a professional logo vector. Phase 2 therefore does not merely vectorize — it *structures for motion*. And the animation must always land exactly on the QA-verified static vector (the **Final Frame Contract**).

## Deliverables

- `logo.svg` — final static vector (motion-ready structure)
- `logo_motion.html` — showcase-style standalone HTML with the main animation, atomic motion studies, replay/slow/speed controls, and QA hooks
- `motion_spec.md` — personality words, principles applied, timeline table, easing tokens, atomic motions, tunable controls
- `outputs/fit_iterations/*.png` + `overlay_progress_strip.png` — geometry QA evidence
- `outputs/motion_frames/*.png` + `motion_strip.png` — motion QA evidence
- `final_render.png`, `html_render.png` — static renders; path audit artifacts when smoothness was a concern

---

Read the full skill on GitHub

Details

Skill name: pixel2motion
Repository: nolangz/pixel2motion
License: MIT
Repo updated: 21 August 2026

FAQ

What does the Pixel2motion skill do?

How do I install the Pixel2motion skill?

skills CLI (Claude Code, Cursor, Codex and more): npx skills add nolangz/pixel2motion --skill pixel2motion. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.

Is Pixel2motion popular?

It lives in nolangz/pixel2motion, which has 2,558 GitHub stars and 212 forks.

Related skills

Uncodixfy

2.7k

cyxzdev/Uncodixfy

Prevents generic AI/Codex UI patterns when generating frontend code. Use this skill whenever generating HTML, CSS, React, Vue, Svelte, or any frontend UI code to enforce clean, human-designed aesthetics inspired by Linear, Raycast, Stripe, and GitHub instead of typical AI-generated UI.

Frontend & Design167

Oil Motion

2.7k

oil-oil/oil-motion

把 AI 生成或已有的视频、序列帧变成随滚动、指针、拖动、触摸、设备方向、音频、数据或状态变化的网页动画：设计动作方向，生成关键帧与视频，整理成图集或视频，编译时间轴并接入运行时。用户需要角色转向、产品拆解、镜头穿越、一镜到底转场，或要清理、抠色、补帧、压缩绿幕视频与雪碧图时使用。不用于纯 CSS、JS、SVG、Lottie 或实时 3D 就能完成的界面过渡与微交互（交给普通前端实现），也不用于独立成片剪辑、单张配图或静态页面。

Frontend & Design201

Design Dna

2.1k

zanwei/design-dna

Extract, define, and apply design DNA across three dimensions: design system (tokens), design style (qualitative feel), and visual effects (Canvas, WebGL, 3D, particles, shaders, scroll effects, etc.). Use this skill when: (1) a user wants to see the full 3-dimension design structure/schema, (2) a user provides images, screenshots, or URLs of reference designs and wants them analyzed into a structured JSON profile covering all three dimensions, (3) a user has a Design DNA JSON and content and wants a design generated from it, or (4) any combination of these phases. Triggers on "design DNA", "e

Frontend & Design114

Markstream Vue2 Vite

Simon-He95/markstream-vue

Integrate markstream-vue2 into a Vue 2 plus Vite app. Use when Codex needs Vite-friendly worker imports, `?worker` or `?worker&inline` setup for Mermaid or KaTeX, modern CSS ordering, or Vue 2 compatibility in a Vite-based repository.

Frontend & DesignIn 2 lists188

Logo Generator

2.3k

op7418/logo-generator-skill

Generate professional SVG logos and high-end showcase images. Use when the user wants to: (1) Create a logo or icon for their product/brand, (2) Generate logo design concepts based on product information, (3) Create professional logo showcase presentations with multiple background styles, (4) Export logos in various formats (SVG, PNG), or (5) Iterate on logo designs with different visual styles. Supports geometric patterns, dot matrix designs, line systems, and mixed compositions. Generates showcase images using Nano Banana (Gemini image generation) with 12 professional background styles.

Frontend & Design177

Markstream Vue2 CLI

Simon-He95/markstream-vue

Integrate markstream-vue2 into a Vue 2 Vue CLI or Webpack 4 app. Use when Codex needs Webpack 4-friendly setup, CDN worker fallbacks for Mermaid or KaTeX, `dist/index.css` imports, Vue 2 composition-api shims, or code block choices limited to `stream-diffs` or plain `<pre>`.

Frontend & DesignIn 2 lists188

Browse the most popular Claude skills, all frontend & design skills, or write your own with the skills generator.