Pixel2motion

Přemění rastrové logo na minimální SVG, poté choreografické odhalení pohybu podle 12 principů.

od nolangz · nolangz/pixel2motion

Otestováno · Funguje ★ 9.6/10

Pixel2motion — Přemění rastrové logo na minimální SVG, poté choreografické odhalení pohybu podle 12 principů.

Co umí

Dovednost animace loga: vektorizuje PNG/JPG logo na nízko-komplexní, pro pohyb připravené SVG (sémantické ID pro každou část), poté choreografuje odhalení/smyčku/hover pomocí 12 principů Disneyho, dodané jako samostatný HTML bez závislostí. Spouští se na požadavky na animaci loga, vytvoření úvodní/značkové animace, převod obrázku loga na animované SVG/HTML nebo přidání pohybu načítání/nečinnosti/hoveru ke značce. Základní tvorba je čistě výzvová; její pipeline pro QA důkazy (překrytí IoU, zachycení snímků, sonda easingu) potřebuje headless Chrome + Playwright + Pillow/numpy.

Testovací report

Načten strom přes gh (raw GitHub byl omezen rychlostí): jeden kořenový SKILL.md (28KB), plus 5 references/*.md a 11 scripts/*.py — vše přítomno a jediný volání podprocesu render_overlay.py je headless Chrome, žádná exfiltrace/skryté instrukce. Měřen VÝSTUP skutečně: snímky obrazovky headless-Chrome ukazují, že verze dovednosti kaskádovitě animuje části s kresleným kruhem + přehnaným vyskočením a čistě přistane na finálním snímku (3 doslovné kubické bezierovy křivky, 0 var() uvnitř @keyframes, kreslení pathLength, blok reduced-motion), zatímco základní stav vše plynule prolíná/škáluje a lineárně. Fráze spouštění — MĚLO BY: 'animuj logo mé společnosti do úvodní obrazovky', 'přeměň toto PNG logo na animované SVG s kreslením', 'vytvoř animaci načítání pro naši značku'; NEMĚLO BY: 'vektorizuj tuto krajinnou fotografii do SVG', 'vytvoř kompletní knihovnu CSS přechodů stránek pro můj web' — všech 5 posouzeno správně.

Testováno: 2026-07-20 · Claude Code 2.x (agent harness)

Instalace

Copy the repo into ~/.claude/skills/pixel2motion (or a project .claude/skills dir). Core motion authoring works immediately; to run the bundled QA scripts install Pillow+numpy (venv), headless Chrome (CHROME_BIN), and Playwright.

Příkazy a ukázkové prompty

  • /pixel2motionPřemění rastrové logo na minimální SVG, poté choreografické odhalení pohybu podle 12 principů.

Skilly se spouštějí běžnými požadavky — žádné příkazy k zapamatování. Po instalaci ho aktivují prompty jako tyto (anglicky):

  • Animate our logo for a splash screen
  • Convert this PNG logo into a vector SVG
  • Build a logo reveal animation for our website