pixel2motion

项目背景与核心定位

品牌视觉正在经历一场静默革命。你刷到一个 App 开屏动画，logo 以流畅的线条逐笔描画出场，配合柔和的缓动曲线——感觉专业、值钱、值得信赖。同样的静态 logo，换一套出场动画，用户的品牌感知可能相差 30% 以上（视觉心理学研究估算，非精确测量）。这就是 logo motion 的价值：让品牌在数字触点的每一帧都传递一致的质感。

Pixel2Motion 正是解决这个问题的开源 AI 技能。它由开发者 nolangz 创建，运行在 Claude、Codex 等 AI 编程 Agent 上，将一个 PNG/JPG/WebP 格式的像素 logo，经过两步 AI 处理——像素→平滑 SVG 矢量拟合，再 SVG → 迪士尼12动画原理编排的 HTML 动效——最终输出可直接用于网页的动态 logo 文件。

一句话定位：一个开源的 AI Agent 技能，专门把静态像素 logo 变成"有灵魂"的 SVG 动画。

技术原理：两阶段融合

Pixel2Motion 的核心洞察是：最小平滑几何结构天然适合动画。一个由 3 个语义部件组成的 logo，可以优雅地逐件入场；一个由 400 个锯齿状描边点堆出来的"高精度"拟合，根本无法编排动画。

Phase 1：像素 → 向量拟合

这不是简单的图片转 SVG。Pixel2Motion 的拟合过程是一个 10 轮迭代 QA 循环：

1. AI 将 logo 分解为语义部件（品牌符号、文字商标、分隔符等）
2. 用平滑曲线拟合每个部件，生成候选 SVG
3. 将 SVG 渲染覆盖在原始像素图上，生成 QA 进度条（overlay progress strip）
4. 用 IoU（交并比）作为诊断指标，但不设固定阈值——平滑度和结构化程度才是硬门槛
5. 若低 IoU 但结构干净的方案优于高 IoU 但锯齿状的方案，选择前者并说明理由

最终交付物是 logo.svg，其中的每个部件（mark、dot、wordmark）都是独立可寻址的 SVG 元素。

Phase 2：矢量 → 品牌动画

拿到结构良好的 SVG 后，进入运动编排环节。Pixel2Motion 内置了一套从 迪士尼《生命之幻象》12 动画原理 提炼的品牌运动指南，核心包括：

原理	对 logo 动画的应用	参数区间
Squash & Stretch	品牌个性决定形变幅度	0%（专业）~25%（活泼）
Anticipation	先收缩再弹出场	持续时间 × 0.15
Ease-in / Ease-out	品牌能量决定加速/减速比	cubic-bezier 自定义
Arc	手写体 logo 用弧线轨迹	-
Secondary Action	副标题/装饰线跟随主体延迟入场	+200ms

动画编排的输出是 logo_motion.html——一个独立的 HTML 文件，内嵌 JS 渲染，无需任何框架，可在任何现代浏览器直接打开。文件还内置了播放速度控制（0.65×~2×）、慢速回放、逐帧检查等 QA 工具。

项目结构与技术栈

Pixel2Motion 的代码库结构清晰，围绕 AI 协作设计：

pixel2motion/
├── SKILL.md           ← AI Agent 的指令手册（含完整工作流）
├── agents/
│   └── openai.yaml    ← OpenAI Codex 格式的技能注册文件
├── scripts/           ← 10+ 个 Python 脚本，精确控制每个处理步骤
│   ├── raster_logo_trace.py      # 像素拟合
│   ├── fit_ribbon_centerline.py  # 丝带曲线拟合（v2 新增）
│   ├── animate_svg_showcase.py  # HTML 动效渲染
│   ├── capture_motion_frames.py  # 逐帧截图
│   └── svg_path_audit.py         # 路径平滑度审计
├── references/         # 动画原理参考文档（设计师友好）
└── docs/              # GitHub Pages 静态展示站
    ├── index.html     # 在线动效画廊（直接可访问）
    └── gifs/          # 各 logo 的 GIF 预览

主力语言：Python（脚本层）+ JavaScript/HTML（交付物） AI 集成：Claude Skill + Codex Skill，双平台兼容 License：MIT

使用场景与上手方式

谁适合用？

• 品牌设计师：需要为甲方快速交付动态 logo 提案，无需 After Effects 经验
• 前端开发者：需要将品牌 logo 做成网页开屏动画，加载页或空状态提示
• AI 开发者/研究员：构建品牌视觉自动化流水线，或研究 AI 辅助设计
• AI Agent 用户：将 logo motion 能力嵌入 Claude/Codex 的工作流

如何使用？

方式一：通过 Claude / Codex 直接调用（推荐）

# 在 Claude 或 Codex 中直接对话
Use $pixel2motion to turn this raster logo into a clean minimal 
vector and then into a choreographed logo animation.
# 附上一张 logo 图片

方式二：手动运行脚本

# 安装依赖（Python 3）
pip install svgwrite Pillow cairosvg

# 运行拟合
python scripts/raster_logo_trace.py input_logo.png

# 渲染动效 HTML
python scripts/animate_svg_showcase.py logo.svg     --css motion.css     --out logo_motion.html     --title "Your Brand"     --duration-hint 1900

局限性：坦诚的自我评估

Pixel2Motion 并非银弹，其 SKILL.md 文档中明确列出了以下局限：

几何复杂度门槛：过于复杂的 logo（如照片级渐变、多层纹理、摄影图像）不适合此工具。目标是"品牌级"简洁 logo，复杂图形建议先简化。

IoU 陷阱：追求高 IoU 数值容易导致锯齿拟合被接受。文档反复强调——平滑度 > IoU 数字，这是核心判断标准，但新手容易踩这个坑。

无固定自动化流水线：每个 logo 都需要人工审查 QA 进度条，判断拟合质量。完全自动化的 logo motion 流水线尚不存在。

品牌调性判断的主观性：motion personality 参数（能量/调性双轴）依赖人工输入，不同使用者对同一品牌可能推导出截然不同的动画风格。

行业意义

logo motion 是品牌设计中最被低估的效率洼地。传统流程中，一个 logo 动画需要设计师在 After Effects 中手动逐帧编排，单次交付成本在 500~3000 美元不等。Pixel2Motion 证明了 AI Agent 可以将这个过程大幅压缩：输入一张像素图，输出 QA 验证过的矢量结构 + 可运行的 HTML 动画，整个过程在 AI 对话中完成。

截至目前，该项目在 GitHub 拥有 2300+ stars，主题标签覆盖 AI 动画、AI 设计工具、品牌运动、生成式 AI 等多个热门方向。它不是一个商业 SaaS，而是一套可审计、可复用、可本地部署的方法论——对于希望将 AI 辅助设计能力内建到自己产品线中的团队，具有较高的参考价值。