{"id":51197077,"url":"https://github.com/nolangz/pixel2motion","last_synced_at":"2026-06-28T09:00:51.844Z","repository":{"id":364270722,"uuid":"1266923310","full_name":"nolangz/pixel2motion","owner":"nolangz","description":"AI logo animation skill: turn raster logos into smooth SVG animation, animated HTML demos, GIF/video previews, and motion QA evidence.","archived":false,"fork":false,"pushed_at":"2026-06-26T09:00:08.000Z","size":3588,"stargazers_count":1038,"open_issues_count":6,"forks_count":87,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-06-26T09:24:57.315Z","etag":null,"topics":["ai-design-tools","animated-logo","brand-motion","claude-skill","codex-skill","html-animation","logo-animation","logo-motion","logo-reveal","motion-design","pixel-to-svg","raster-to-svg","svg-animation","svg-motion","vector-animation"],"latest_commit_sha":null,"homepage":"https://nolangz.github.io/pixel2motion/","language":"Python","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nolangz.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-06-12T04:25:17.000Z","updated_at":"2026-06-26T09:00:17.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/nolangz/pixel2motion","commit_stats":null,"previous_names":["nolangz/pixel2motion"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/nolangz/pixel2motion","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nolangz%2Fpixel2motion","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nolangz%2Fpixel2motion/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nolangz%2Fpixel2motion/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nolangz%2Fpixel2motion/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nolangz","download_url":"https://codeload.github.com/nolangz/pixel2motion/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nolangz%2Fpixel2motion/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34882751,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-28T02:00:05.809Z","response_time":54,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ai-design-tools","animated-logo","brand-motion","claude-skill","codex-skill","html-animation","logo-animation","logo-motion","logo-reveal","motion-design","pixel-to-svg","raster-to-svg","svg-animation","svg-motion","vector-animation"],"created_at":"2026-06-27T21:31:06.299Z","updated_at":"2026-06-28T09:00:51.837Z","avatar_url":"https://github.com/nolangz.png","language":"Python","funding_links":[],"categories":["Source Catalog","Diagram and Visual Skills"],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://www.pixel2motion.com\"\u003e\n    \u003cimg src=\"docs/community/pixel2motion-wordmark.png\" width=\"520\" alt=\"Pixel2Motion wordmark commercial service preview\"\u003e\n  \u003c/a\u003e\n  \u003cbr\u003e\n  \u003cstrong\u003e\u003ca href=\"https://www.pixel2motion.com\"\u003ewww.pixel2motion.com\u003c/a\u003e\u003c/strong\u003e\n  \u003cbr\u003e\n  Better commercial Pixel2Motion services are coming online: polished logo-to-motion workflows, project-ready previews, and production support beyond the open-source skill.\n  \u003cbr\u003e\n  中文：更完整的 Pixel2Motion 商业服务正在上线，面向更稳定的 logo-to-motion 交付、预览和项目支持。\n\u003c/p\u003e\n\n---\n\n# Pixel2Motion - AI Logo Animation Skill\n\n**Raster logo → smooth minimal SVG → SVG logo animation → interactive HTML motion demo.**\n\n[Commercial preview](https://www.pixel2motion.com) · [Live interactive demo](https://nolangz.github.io/pixel2motion/) · [Skill instructions](https://github.com/nolangz/pixel2motion/blob/main/SKILL.md) · [Companion skill: Pixel2SVG-HTML](https://github.com/nolangz/pixel2svg-html)\n\nPixel2Motion 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.\n\n中文：Pixel2Motion 是一个把像素 logo 转成平滑 SVG，再生成品牌 motion、logo reveal、HTML 动效展示和视频预览的 Codex skill。它适合需要可审查矢量拟合、可复用 SVG 结构和可导出动图/透明视频的设计与开发场景。\n\nRecommended review order: the motion gallery below, the commercial preview, the interactive demo, the fitting evidence, and then the implementation workflow.\n\n## Pixel-to-Motion Gallery\n\nEach 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.\n\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\" width=\"50%\"\u003e\n      \u003cstrong\u003eHorizon\u003c/strong\u003e\u003cbr\u003e\n      \u003csub\u003ePixel source\u003c/sub\u003e\u003cbr\u003e\n      \u003cimg src=\"docs/pixels/horizon-pixel.png\" width=\"260\" alt=\"Horizon pixel source logo\"\u003e\u003cbr\u003e\n      \u003csub\u003eMotion output\u003c/sub\u003e\u003cbr\u003e\n      \u003cimg src=\"docs/gifs/claude-horizon.gif\" width=\"320\" alt=\"Claude Horizon logo motion preview\"\u003e\n    \u003c/td\u003e\n    \u003ctd align=\"center\" width=\"50%\"\u003e\n      \u003cstrong\u003eContinuum\u003c/strong\u003e\u003cbr\u003e\n      \u003csub\u003ePixel source\u003c/sub\u003e\u003cbr\u003e\n      \u003cimg src=\"docs/pixels/continuum-pixel.png\" width=\"260\" alt=\"Continuum pixel source logo\"\u003e\u003cbr\u003e\n      \u003csub\u003eMotion output\u003c/sub\u003e\u003cbr\u003e\n      \u003cimg src=\"docs/gifs/claude-continuum.gif\" width=\"320\" alt=\"Claude Continuum logo motion preview\"\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\" width=\"50%\"\u003e\n      \u003cstrong\u003eCueRecord\u003c/strong\u003e\u003cbr\u003e\n      \u003csub\u003ePixel source\u003c/sub\u003e\u003cbr\u003e\n      \u003cimg src=\"docs/pixels/cuerecord-pixel.jpg\" width=\"300\" alt=\"CueRecord pixel source logo\"\u003e\u003cbr\u003e\n      \u003csub\u003eMotion output\u003c/sub\u003e\u003cbr\u003e\n      \u003cimg src=\"docs/gifs/claude-cuerecord.gif\" width=\"320\" alt=\"Claude CueRecord logo motion preview\"\u003e\n    \u003c/td\u003e\n    \u003ctd align=\"center\" width=\"50%\"\u003e\n      \u003cstrong\u003eN\u003c/strong\u003e\u003cbr\u003e\n      \u003csub\u003ePixel source\u003c/sub\u003e\u003cbr\u003e\n      \u003cimg src=\"docs/pixels/n-pixel.png\" width=\"320\" alt=\"N pixel source logo\"\u003e\u003cbr\u003e\n      \u003csub\u003eMotion output\u003c/sub\u003e\u003cbr\u003e\n      \u003cimg src=\"docs/gifs/claude-n.gif\" width=\"320\" alt=\"Claude N logo motion preview\"\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\" width=\"50%\"\u003e\n      \u003cstrong\u003eFocus\u003c/strong\u003e\u003cbr\u003e\n      \u003csub\u003ePixel source\u003c/sub\u003e\u003cbr\u003e\n      \u003cimg src=\"docs/pixels/focus-pixel.png\" width=\"260\" alt=\"Focus pixel source logo\"\u003e\u003cbr\u003e\n      \u003csub\u003eMotion output\u003c/sub\u003e\u003cbr\u003e\n      \u003cimg src=\"docs/gifs/claude-focus.gif\" width=\"320\" alt=\"Claude Focus logo motion preview\"\u003e\n    \u003c/td\u003e\n    \u003ctd align=\"center\" width=\"50%\"\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n## Commercial Preview\n\n[![Pixel2Motion project preview](docs/preview.png)](https://www.pixel2motion.com)\n\nThe full interactive showcase lives in `docs/index.html` and is published through GitHub Pages at [nolangz.github.io/pixel2motion](https://nolangz.github.io/pixel2motion/). A more polished commercial Pixel2Motion service is coming online at [www.pixel2motion.com](https://www.pixel2motion.com), with project-ready previews and production support beyond the open-source skill.\n\n## Fitting Evidence\n\nEvery animation is authored against a QA-verified static vector. The CueRecord fitting sequence, read left to right:\n\n![CueRecord overlay progress strip](docs/process/cuerecord-overlay-progress-strip.png)\n\nThe 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.\n\nPixel2Motion 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](https://github.com/nolangz/pixel2svg-html) project.\n\n## Deliverables\n\n- `logo.svg`: final static vector, structured for motion\n- `motion.css`: authored choreography targeting semantic SVG ids\n- `logo_motion.html`: dependency-free showcase HTML with replay, slow motion, speed control, QA hooks, and atomic motion studies\n- `motion_spec.md`: motion brief, principles applied, timeline, easing tokens, and QA notes\n- `outputs/fit_iterations/*.png`: geometry overlay evidence\n- `outputs/motion_frames/*.png` and `outputs/motion_strip.png`: deterministic motion QA evidence\n- `outputs/final_render.png` and `outputs/html_render.png`: static render checks\n\n## Workflow\n\n1. Read `SKILL.md` and the relevant reference files before fitting or choreographing.\n2. Write the motion brief in `motion_spec.md`: personality, usage context, part inventory, and choreography sketch.\n3. Fit and QA the static vector:\n\n```bash\npython3 scripts/render_overlay.py logo.svg source.png \\\n  --out outputs/fit_iterations/01_overlay.png \\\n  --render-out outputs/final_render.png \\\n  --report outputs/fit_metrics.json\n```\n\n4. Audit complex curves when smoothness is a concern:\n\n```bash\npython3 scripts/svg_path_audit.py logo.svg \\\n  --out-svg outputs/bezier_segments.svg \\\n  --report outputs/bezier_audit.json\n```\n\n5. Build the showcase HTML from the verified SVG and authored CSS:\n\n```bash\npython3 scripts/animate_svg_showcase.py logo.svg \\\n  --css motion.css \\\n  --out logo_motion.html \\\n  --title \"Logo Motion\" \\\n  --duration-hint 1500\n```\n\n6. Capture deterministic motion frames:\n\n```bash\npython3 scripts/capture_motion_frames.py logo_motion.html \\\n  --times 0,300,700,1000,1250,1500 \\\n  --out outputs/motion_frames \\\n  --strip outputs/motion_strip.png \\\n  --compare-final outputs/final_render.png\n```\n\n7. Probe risky motion windows when the animation uses draw-on, crossings, masks, or handoffs:\n\n```bash\npython3 scripts/probe_motion_continuity.py logo_motion.html \\\n  --times 500,700,900 \\\n  --probe \"#draw-stroke:stroke-dashoffset,#pen-glint:offset-distance\"\n```\n\n## Requirements\n\n- Python 3.10+\n- `Pillow` and `numpy` for image analysis helpers\n- Chrome or Chromium for geometry and HTML rendering\n- Playwright for deterministic frame capture and motion continuity QA\n\nRecommended local setup:\n\n```bash\npython3 -m venv .venv\n.venv/bin/pip install pillow numpy playwright\n.venv/bin/python -m playwright install chromium\n```\n\nIf Chrome is not on the default path, set `CHROME_BIN` before running render checks:\n\n```bash\nexport CHROME_BIN=\"/Applications/Google Chrome.app/Contents/MacOS/Google Chrome\"\n```\n\n## Repository Layout\n\n- `SKILL.md`: Codex-facing pixel-to-vector-to-motion workflow\n- `agents/openai.yaml`: UI metadata for the skill\n- `references/`: animation principles, motion personality, reveal patterns, HTML delivery template, and fitting references\n- `scripts/`: helpers for tracing, rendering, overlays, path audits, showcase HTML generation, deterministic frame capture, and motion continuity probing\n- `docs/`: GitHub Pages demo, README preview images, GIFs, and fitting-process evidence\n\n## Publishing Checklist\n\n- Confirm `SKILL.md`, `agents/openai.yaml`, `references/`, `scripts/`, and `docs/` are committed.\n- Keep generated logo deliverables, motion captures, local virtual environments, caches, and per-logo `outputs/` out of git.\n- Enable GitHub Pages from branch `main`, folder `/docs`, after the first push.\n- Add a `LICENSE` file before publishing if this repository should grant reuse rights.\n- After creating the GitHub repository, add the remote and push:\n\n```bash\ngit remote add origin git@github.com:\u003cowner\u003e/pixel2motion.git\ngit branch -M main\ngit push -u origin main\n```\n\n## More From Nolanlai\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://www.nolanlai.com\"\u003e\n    \u003cimg src=\"docs/community/nolanlai-creative-tools.png\" width=\"520\" alt=\"Nolanlai's Creative Tools\"\u003e\n  \u003c/a\u003e\n  \u003cbr\u003e\n  \u003ca href=\"https://www.nolanlai.com\"\u003e\u003cstrong\u003ewww.nolanlai.com\u003c/strong\u003e\u003c/a\u003e\n  \u003cbr\u003e\n  More creative tools, experiments, and notes from Nolanlai.\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"docs/community/vibe-creators-wechat-qr.jpg\" width=\"360\" alt=\"Nolanlai WeChat QR code for Vibe-Creators invite\"\u003e\n  \u003cbr\u003e\n  \u003cstrong\u003eVibe-Creators 交流\u003c/strong\u003e\n  \u003cbr\u003e\n  Vibe-Creators 群已满。扫码加我为好友，我邀请你进群。\n  \u003cbr\u003e\n  The Vibe-Creators group is currently full. Scan the QR code to add me on WeChat, and I can invite you in.\n\u003c/p\u003e\n\n## Star History\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://www.star-history.com/#nolangz/pixel2motion\u0026Date\"\u003e\n    \u003cimg src=\"https://api.star-history.com/svg?repos=nolangz/pixel2motion\u0026type=Date\" width=\"720\" alt=\"Pixel2Motion GitHub star history chart\"\u003e\n  \u003c/a\u003e\n  \u003cbr\u003e\n  \u003csub\u003eClassic hand-drawn growth curve for Pixel2Motion GitHub stars.\u003c/sub\u003e\n\u003c/p\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnolangz%2Fpixel2motion","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnolangz%2Fpixel2motion","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnolangz%2Fpixel2motion/lists"}