Pixel2Motion

Установка

npx skillfoxx add skills/pixel2motion

npx skills add nolangz/pixel2motion --skill pixel2motion -a claude-code -y

npx skills add nolangz/pixel2motion --skill pixel2motion -a cursor -y

npx skills add nolangz/pixel2motion --skill pixel2motion -a github-copilot -y

npx skills add nolangz/pixel2motion --skill pixel2motion -a codex -y

npx skills add nolangz/pixel2motion --skill pixel2motion -a gemini-cli -y

npx skills add nolangz/pixel2motion --skill pixel2motion -a cline -y

npx skills add nolangz/pixel2motion --skill pixel2motion -a roo -y

npx skills add nolangz/pixel2motion --skill pixel2motion -a opencode -y

git clone https://github.com/nolangz/pixel2motion.git ~/.claude/skills/pixel2motion

Это чужой код. Посмотрите файлы в репозитории перед установкой.

Что делает

Скилл ведет логотип по цепочке пиксель, вектор, движение. Сначала он читает растровый исходник и пишет бриф движения, затем строит минимальную сглаженную SVG-геометрию, пригодную для анимации, и приводит анимацию к статичному итоговому кадру. На выходе SVG, готовый HTML с анимацией и элементами управления, спецификация движения и кадры для проверки. Тайминги и принципы движения опираются на 12 принципов анимации Disney. Для рендера кадров и проверки непрерывности используются python-скрипты и headless-браузер.

Для кого. Для дизайнеров и разработчиков, которым нужна аккуратная анимация логотипа из растровой картинки.

Пример запроса к агенту

Возьми этот PNG с логотипом и сделай анимацию логотипа в HTML с ревилом

Ограничения

Для рендера кадров и проверки движения нужны python, Pillow, numpy, Playwright и Chromium. Скилл рассчитан на минимальную геометрию: слишком сложный или зашумленный исходник придется упрощать вручную.

Как отключить. Удалите папку pixel2motion из каталога скиллов агента и, при желании, локальное окружение .venv.

Проверка безопасности

• Скилл запускает python-скрипты и headless-браузер для рендера и проверки
• Требует установки локального окружения и браузера

Коротко о README

README представляет Pixel2Motion как скилл для Codex и Claude, который переводит растровый логотип в сглаженный SVG, а затем в анимацию: HTML-демо, превью в GIF или видео и артефакты проверки. Показан рабочий процесс со скриптами сборки HTML, захвата кадров и проверки рискованных участков движения. В требованиях python 3.10+, Pillow и numpy, Chrome или Chromium и Playwright, есть рекомендованная установка окружения и переменная CHROME_BIN. Лицензия MIT.

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.

Похожие