SkillFoxx

Pixel2Motion skill

A skill that turns a raster logo into a clean SVG and builds a logo animation as standalone HTML with motion QA

  • 2,643 ★ on the repository
  • Last commit
  • MIT
Skill

Extended access

Why this level

  • The skill runs python scripts and a headless browser for rendering and QA
  • It requires setting up a local environment and a browser
All reasons and checks

nolangz/pixel2motionAuthor:nolangz

Install

In your terminal, with SkillFoxx CLI

npx skillfoxx add skills/pixel2motion

Detects the agents on your machine, shows the access level and pins the version.

Other ways to install

Access and checks

How we review

Extended accessThe tool runs code or makes network calls and only reads external data.

  • The skill runs python scripts and a headless browser for rendering and QA
  • It requires setting up a local environment and a browser

This is third-party code. Review the repository files before installing.

What it does

The skill walks a logo through pixel, vector, motion. It first reads the raster source and writes a motion brief, then builds minimal smoothed SVG geometry that is ready to animate, and lands the animation on a static final frame. Outputs are the SVG, a standalone HTML with the animation and controls, a motion spec and QA frames. Timing and motion principles follow Disney's 12 principles of animation. Rendering frames and checking continuity use python scripts and a headless browser.

Who it is for. For designers and developers who need a clean logo animation from a raster image.

Good fit when

  • You need to animate a logo from a PNG or screenshot
  • You need a logo reveal or brand splash in HTML
  • You need to turn a raster mark into a clean motion-ready SVG

Not a fit when

  • You need a complex illustration rather than a vector mark
  • You cannot set up python and a headless browser for rendering and QA

Example request

Take this PNG logo and build a logo animation in HTML with a reveal

Limitations

Rendering frames and motion QA need python, Pillow, numpy, Playwright and Chromium. The skill targets minimal geometry: a very complex or noisy source will need manual simplification.

How to disable. Remove the pixel2motion folder from the agent's skills directory and, if you wish, the local .venv environment.

FAQ

What are the outputs?

An SVG logo, a standalone HTML with animation and controls, a motion spec and QA frames.

Why python and a browser?

The scripts render animation frames and check motion continuity through a headless Chromium.

Discussion

No questions or reviews yet.

Skills

A skill that generates extremely simple, cute mascot characters for logos: rounded forms, three colors, lower-corner composition

SkillExtended access6.5K

Nine motion design skills for Claude Code: timing, color, composition, After Effects, Remotion, logos and backgrounds.

PluginMinimal access229

A skill that makes promo videos from code: direction, in-browser animation with motion blur, its own score and a 60 fps MP4

PluginExtended access79

A Claude Code and Codex skill that turns a topic into a narrated motion-graphics explainer video on Remotion with subtitles and chapters

SkillExtended access3.3K

A skill that turns narration text into a 20-second chunky-pixel explainer at 1920×1080 with voice-over and an editable project.

SkillExtended access84

A Claude Code skill for short animated videos drawn in code: seven styles, story and storyboard sign-off, voice-over and an MP4 render

SkillExtended access1.8K

README in short

The README presents Pixel2Motion as a Codex and Claude skill that turns a raster logo into a smoothed SVG and then into motion: an HTML demo, GIF or video previews and QA artifacts. It shows the workflow with scripts to build the HTML, capture frames and probe risky motion windows. Requirements list python 3.10+, Pillow and numpy, Chrome or Chromium and Playwright, with a recommended env setup and a CHROME_BIN variable. MIT licensed.

README badge

Original SKILL.md

---
name: pixel2motion
description: "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 (split-fill, exact easing subdivision, tip glint), closed variable-width ribbon fitting, and quantitative motion QA (easing probe, ink-delta continuity sweep)."
---

# 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

---

## Phase 1 — PIXEL: Read the source, write the brief

1. **Analyze the raster source.** Record image size, mode, alpha, foreground colors, background (transparent/solid). Identify the *semantic parts*: mark vs wordmark, individual letters, dots, swooshes, containers, negative space. Each part is a future actor in the animation.
2. **Write the motion brief** before touching geometry:
   - **Personality**: 3 brand motion words (e.g. "swift, precise, confident"). Derive from the logo's own visual language (geometric = engineered motion, organic = flowing motion, rounded = soft/bouncy) plus any user-stated brand context. See `references/motion-personality.md` to map words → timing scale, easing tokens, principle emphasis.

Report a problem