Search skills/

Pixel2Motion Claude skill

A skill that traces a raster logo into a clean SVG, then builds a choreographed logo animation as standalone HTML, with GIF/video export and motion checks.

nolangz/pixel2motion 1 skill Design & frontendVideo & media
Our verdict Recommended

A specialized, script-backed skill with explicit quality gates for one task; it does that task well on paper but has no automated tests.

4/5 Depth expertise shipped Note Security Review before installing 2mo Maintenance Updated 2 mo ago 2.5K Adoption stars OK License MIT, commercial OK

What Pixel2Motion does

Pixel2Motion converts a PNG, JPG, WebP or screenshot of a logo into a smooth minimal SVG, then animates it. The vector fit is judged first on edge smoothness as a hard gate, with overlap (IoU) optimized as high as reasonable and no fixed global threshold. The animation follows Disney's twelve principles and is delivered as standalone JavaScript-rendered HTML. Version 2 adds self-crossing draw-on choreography with split fills and exact easing subdivision, closed variable-width ribbon fitting, and quantitative motion QA.

Outputs include the animated HTML, GIF or video previews, a motion_spec.md with timeline, easing tokens and QA notes, and evidence images showing the vector fit. The SKILL.md is about 28 KB with 23 reference files and 11 Python and Node scripts for tracing, centerline fitting, path audit, frame capture, overlay rendering and continuity probing. It needs Python with Pillow, NumPy and Playwright, and the video export script uses Node. The README also advertises a commercial Pixel2Motion service. There are no tests, and the README still contains a line telling maintainers to add a LICENSE file even though one exists.

Good for

  • Animating a brand mark for a splash screen, loader or reveal
  • Turning a raster logo into reusable SVG
  • Reviewable motion with measured QA evidence

Not for

  • Complex character or 3D animation
  • Pixel-exact vectorization of detailed illustrations

What's inside depth 4/5

A 28 KB skill with 23 reference files and 11 scripts for tracing, fitting and QA, but no tests or evals.

Skills
1
Reference docs
23
Scripts
11
Tests / evals
0
Templates
0
Avg SKILL.md
27.9 KB

Counted from the repository file tree. How we score depth.

Dependencies and costs

  • Python with pillow, numpy and playwright
  • Node for video export
  • A Chromium install for frame capture

Security review

Review before installing

Logo-vectorising and animation skill whose scripts run locally: Python tracing and HTML generation, plus headless Chrome/Playwright frame capture and an optional ffmpeg video export. It makes no external network requests and uses a temporary Chrome profile, not your browser profile. Setup needs pillow, numpy, Playwright and Chromium installed separately.

Worth knowing

  • Installs packages or toolsSetup installs pillow, numpy and playwright (unpinned) into a venv and downloads Chromium with playwright install chromium.README.md:162
  • Relies on a CLI or package we could not reviewCalls ffmpeg and a hardcoded macOS Google Chrome binary; those programs are not in the repo.scripts/export_claude_videos.mjs:449

What we checked

The repository (39 files) on Oct 29, 2026. Not a full review: it relies on code outside the repository: pip packages pillow, numpy, playwright and the Chromium browser it downloads; ffmpeg binary used by export_claude_videos.mjs.

NVIDIA SkillSpector static scan: 10 pattern hits (analysis-evasion 4, Prompt Injection 3, YARA Match 1, MCP Least Privilege 1, Dangerous Code Execution 1). The 'incomplete referenced artifact' hits are the scanner not following SKILL.md mentions of scripts that exist; 'pSpy' and whitespace-padding hits are inside base64 image data in docs/index.html; the subprocess hit is headless Chrome rendering in render_overlay.py. The scripts only make local requests (127.0.0.1 debugging port) and the other URLs are the SVG namespace.

A review, not a certification. Skills change after we check them — read the files before installing.

License

MIT — commercial use allowed.

Can it run unattended?

Not really. It is a per-logo creative workflow with visual review points, not an unattended loop.

Alternatives to Pixel2Motion

Remotion Agent Skills

remotion-dev/skills

The Remotion team's twelve skills for building videos as React code: project setup, markup rules, maps, captions, studio, render and upgrades.

Recommended Check first Depth 3/5

HyperFrames

heygen-com/hyperframes

HeyGen's framework and skills for writing HTML and rendering it to deterministic MP4 video, with a CLI, a block registry and media tooling.

With caveats Broad access Depth 4/5

transitions.dev

Jakubantalik/transitions.dev

43+ copy-ready CSS transitions with five skills: apply recipes, polish motion, generate a wireframe-reveal UI, scan a codebase, and a live Refine panel.

With caveats Check first Depth 3/5

FAQ

What is Pixel2Motion?

It is an open-source agent skill that turns a raster logo into a minimal SVG and then into an animated HTML logo reveal, with GIF or video previews and motion QA evidence.

How do I install Pixel2Motion?

Copy the repository into your agent's skills folder and install the Python dependencies, including Pillow, NumPy and Playwright. Node is needed for the video export script.

Does Pixel2Motion produce an SVG I can reuse?

Yes. It builds a QA-checked static vector first, then animates it, so the SVG structure can be reused. You should still inspect the fit for fine detail.

Sources: GitHub repository (stars, license, file tree, last push Aug 21, 2026). Review based on the README and SKILL.md files as published.