pixel2motion

Raster logo → smooth minimal SVG → SVG logo animation → interactive HTML motion demo.

Live interactive demo · Skill instructions · Companion skill: Pixel2SVG-HTML

Pixel2Motion is an open-source Codex and Claude skill for logo animation, SVG animation, and AI-assisted brand motion. It turns PNG, JPG, WebP, or screenshot logos into clean motion-ready SVG, then exports animated logo HTML, GIF/video previews, and motion QA evidence. Use it for animated logos, SVG logo reveals, logo motion design, pixel-to-vector reconstruction, and developer-friendly HTML animation workflows.

中文：Pixel2Motion 是一个把像素 logo 转成平滑 SVG，再生成品牌 motion、logo reveal、HTML 动效展示和视频预览的 Codex skill。它适合需要可审查矢量拟合、可复用 SVG 结构和可导出动图/透明视频的设计与开发场景。

Recommended review order: the motion gallery below, the interactive demo, the fitting evidence, and then the implementation workflow.

Pixel-to-Motion Gallery

Each pairing shows the raster source next to the motion output, rendered from docs/index.html at the animation's default speed: Horizon 1900 ms, Continuum 2000 ms, Focus 1700 ms, N 2400 ms, and CueRecord at the page-default 0.65× custom timeline.

<table> <tr> <td align="center" width="50%"> <strong>Horizon</strong>

  <sub>Pixel source</sub>

  Horizon pixel source logo

  <sub>Motion output</sub>

  Claude Horizon logo motion preview
</td>
<td align="center" width="50%">
  <strong>Continuum</strong>

  <sub>Pixel source</sub>

  Continuum pixel source logo

  <sub>Motion output</sub>

  Claude Continuum logo motion preview
</td>

</tr> <tr> <td align="center" width="50%"> <strong>CueRecord</strong>

  <sub>Pixel source</sub>

  CueRecord pixel source logo

  <sub>Motion output</sub>

  Claude CueRecord logo motion preview
</td>
<td align="center" width="50%">
  <strong>N</strong>

  <sub>Pixel source</sub>

  N pixel source logo

  <sub>Motion output</sub>

  Claude N logo motion preview
</td>

</tr> <tr> <td align="center" width="50%"> <strong>Focus</strong>

  <sub>Pixel source</sub>

  Focus pixel source logo

  <sub>Motion output</sub>

  Claude Focus logo motion preview
</td>
<td align="center" width="50%"></td>

</tr> </table>

Interactive Demo

The full interactive showcase lives in docs/index.html and is published through GitHub Pages at https://nolangz.github.io/pixel2motion/.

Fitting Evidence

Every animation is authored against a QA-verified static vector. The CueRecord fitting sequence, read left to right:

The teal overlays are QA checkpoints, not the deliverable: the vector candidate is repeatedly compared against the raster source until mark scale, dot placement, wordmark baseline, and ink weight hold up — and only then is motion authored on top. The resulting clean semantic SVG, with mark, dot, and wordmark as separate addressable parts, becomes the final-frame contract for the animation.

Pixel2Motion optimizes IoU as a diagnostic, but smoothness and structure are the hard gates. A high-IoU jagged trace is rejected when a lower-complexity smooth vector explains the logo better. The static fitting methodology is documented in full in the companion Pixel2SVG-HTML project.

Deliverables

• logo.svg: final static vector, structured for motion
• motion.css: authored choreography targeting semantic SVG ids
• logo_motion.html: dependency-free showcase HTML with replay, slow motion, speed control, QA hooks, and atomic motion studies
• motion_spec.md: motion brief, principles applied, timeline, easing tokens, and QA notes
• outputs/fit_iterations/*.png: geometry overlay evidence
• outputs/motion_frames/*.png and outputs/motion_strip.png: deterministic motion QA evidence
• outputs/final_render.png and outputs/html_render.png: static render checks

Workflow

1. Read SKILL.md and the relevant reference files before fitting or choreographing.
2. Write the motion brief in motion_spec.md: personality, usage context, part inventory, and choreography sketch.
3. Fit and QA the static vector:

python3 scripts/render_overlay.py logo.svg source.png \
  --out outputs/fit_iterations/01_overlay.png \
  --render-out outputs/final_render.png \
  --report outputs/fit_metrics.json

4. Audit complex curves when smoothness is a concern:

python3 scripts/svg_path_audit.py logo.svg \
  --out-svg outputs/bezier_segments.svg \
  --report outputs/bezier_audit.json

5. Build the showcase HTML from the verified SVG and authored CSS:

python3 scripts/animate_svg_showcase.py logo.svg \
  --css motion.css \
  --out logo_motion.html \
  --title "Logo Motion" \
  --duration-hint 1500

6. Capture deterministic motion frames:

python3 scripts/capture_motion_frames.py logo_motion.html \
  --times 0,300,700,1000,1250,1500 \
  --out outputs/motion_frames \
  --strip outputs/motion_strip.png \
  --compare-final outputs/final_render.png

7. Probe risky motion windows when the animation uses draw-on, crossings, masks, or handoffs:

python3 scripts/probe_motion_continuity.py logo_motion.html \
  --times 500,700,900 \
  --probe "#draw-stroke:stroke-dashoffset,#pen-glint:offset-distance"

Requirements

• Python 3.10+
• Pillow and numpy for image analysis helpers
• Chrome or Chromium for geometry and HTML rendering
• Playwright for deterministic frame capture and motion continuity QA

Recommended local setup:

python3 -m venv .venv
.venv/bin/pip install pillow numpy playwright
.venv/bin/python -m playwright install chromium

If Chrome is not on the default path, set CHROME_BIN before running render checks:

export CHROME_BIN="/Applications/Google Chrome.app/Contents/MacOS/Google Chrome"

Repository Layout

• SKILL.md: Codex-facing pixel-to-vector-to-motion workflow
• agents/openai.yaml: UI metadata for the skill
• references/: animation principles, motion personality, reveal patterns, HTML delivery template, and fitting references
• scripts/: helpers for tracing, rendering, overlays, path audits, showcase HTML generation, deterministic frame capture, and motion continuity probing
• docs/: GitHub Pages demo, README preview images, GIFs, and fitting-process evidence

Publishing Checklist

• Confirm SKILL.md, agents/openai.yaml, references/, scripts/, and docs/ are committed.
• Keep generated logo deliverables, motion captures, local virtual environments, caches, and per-logo outputs/ out of git.
• Enable GitHub Pages from branch main, folder /docs, after the first push.
• Add a LICENSE file before publishing if this repository should grant reuse rights.
• After creating the GitHub repository, add the remote and push:

git remote add origin [email protected]:<owner>/pixel2motion.git
git branch -M main
git push -u origin main

More From Nolanlai

Nolanlai

<strong>www.nolanlai.com</strong>

More creative tools, experiments, and notes from Nolanlai.

Nolanlai WeChat QR code for Vibe-Creators invite

<strong>Vibe-Creators 交流</strong>

Vibe-Creators 群已满。扫码加我为好友，我邀请你进群。

The Vibe-Creators group is currently full. Scan the QR code to add me on WeChat, and I can invite you in.