pixel2motion：把位图 logo 转成平滑 SVG 再做成入场动画

npx skills add nolangz/pixel2motion --skill pixel2motion

手头只有一张 PNG 格式的 logo，想做个开场动画：直接拿位图做动效，放大就糊；丢给自动描摹工具，得到几百个锯齿节点的路径，动画也没法拆开编排。pixel2motion 是 nolangz 在 GitHub 上开源的一份智能体技能（MIT 协议，2026 年 6 月 12 日建仓，截至 2026-10-08 约 2.4k 星），装进 Claude Code 或 Codex 后，让智能体先把位图拟合成干净的 SVG，再在这份矢量上编排动画，最后交出一个能回放、能调速的 HTML 页面。

它让智能体按什么顺序做事

pixel2motion 把一次任务切成三段：先读位图，再拟合矢量，最后做动效。

读位图这一步，智能体要先把 logo 拆成「演员」：图形和字标、每个字母、圆点、弧线各算一个。接着在 motion_spec.md 里写动效简报，包括三个性格词、使用场景（开屏、页头、加载、悬停）和出场顺序，后面所有时长和缓动参数都要能追溯到这份简报。

拟合矢量这一步，它从最简单的图元开始：圆、椭圆、矩形，不够再上少量三次贝塞尔曲线，描摹得到的路径只是最后的备选。每改一次几何，就渲染一张叠在原图上的青色对比图并记录 IoU。预算是最多 10 轮，要么拟合通过，要么选其中最好的一版交付。

做动效这一步，它按 20%、50%、30% 的比例切分预备、主动作和收尾，每个部件错开起止时间，缓动写成字面的 cubic-bezier。官方说明解释了原因：@keyframes 里用 var() 写缓动，Chromium 会悄悄丢掉，动画退成线性。

它严格约束什么

• 平滑优先于 IoU：边缘出现台阶、节点抖动、像素格直线段，哪怕 IoU 很高也判不过；略低但平滑的曲线反而是首选，取舍写进 motion_spec.md。
• 一个部件一个 id：#mark、#wordmark、#dot 各自独立，动画只认 id，不用 nth-child；要画线入场的路径带 pathLength="1"。
• 落点必须等于静态矢量：动画最后一帧要和验证过的静态渲染一致，用 ?static=1 和 ?t=<毫秒> 两个钩子在同一套工具里比对，要求完全相同。
• 留证据：叠图、motion_strip.png 帧条、缓动探针和连续性扫描都要落盘，而不是口头说「看起来不错」。

适合谁

做品牌开屏、产品官网首屏或 App 启动页的设计师和前端，手里只有位图 logo，又想要一份能放进页面的 SVG 动画，可以试试。它和 srt-whiteboard-animation 一样属于「让智能体按流程出动效」，但对象不同：那边把字幕画成手绘视频，这边只处理一枚 logo，而且产出的是代码，不是 MP4。

几点限制要先说清。第一，本地要有 Python 3.10 以上、Pillow、numpy、Chrome 或 Chromium，帧捕获还要装 Playwright，不是复制一个文件就能跑。第二，检查叠图靠智能体看图，用不带视觉能力的模型会丢掉一半质检。第三，README 顶部在推 pixel2motion.com 的商业服务，称要提供更稳定的交付和项目支持；开源技能本身不收费，但两者是不是一回事，仓库没有说明。第四，样例都是几何感强的 logo（Horizon、CueRecord 之类），渐变复杂或带照片质感的标志，仓库没有给出演示，效果自己先试。

仓库里的 CueRecord 样例，是几何感较强的一类：C 形弧线先画出来，红点落下，字标随后展开。