Pixel2Motion (v2)

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

Latest update at:

View on GitHub
npx skills add nolangz/pixel2motion --skill pixel2motion
2,656Stars214ForksRepository last pushed

About this Skill

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).

Why we picked it

Summarized from the original nolangz/pixel2motion SKILL.md by nolangz; the original upstream instructions were used.

What it helps with

  • Use this workflow when the task matches the original Pixel2Motion (v2) instructions.

Before you use it

  • Read the original SKILL.md and referenced files in nolangz/pixel2motion.

Sources & references

Original sources are linked below. Practical starting points are editorial suggestions from SkillHey.