AI Logo Motion 製作攻略

先看 HTML logo 動畫

這篇用 AURALIME 當作單一完整示範：生成乾淨 SVG logo、整理語意化動畫部件、做成 HTML 動畫、檢查最後一幀，最後輸出可剪輯使用的透明素材。

AURALIME 範例的 HTML logo 動畫示範。

流程總覽

整體流程分成兩大段：先生成乾淨的 SVG logo，再把 SVG 拆成有語意的部件進行動畫。

Pipeline

Brand prompt
  -> logo-generator skill
  -> 6 logo concept SVGs
  -> selected final logo.svg
  -> pixel2motion skill
  -> motion-ready SVG structure
  -> motion.css
  -> logo_motion.html
  -> QA frames / motion strip
  -> transparent exports

這篇只用一個例子示範：AURALIME，一個清爽 citrus beverage logo，幾何乾淨、顏色明亮，也很適合拆開動畫。

AURALIME final render。

Step 1：安裝 skills

這套流程使用兩個 Codex skills：logo-generator 負責生成 SVG logo 概念，pixel2motion 負責把 SVG 部件變成 motion。

Install logo-generator

$ python3 /Users/jfon/.codex/skills/.system/skill-installer/scripts/install-skill-from-github.py \
  --repo op7418/logo-generator-skill \
  --path . \
  --name logo-generator

Install pixel2motion

$ python3 /Users/jfon/.codex/skills/.system/skill-installer/scripts/install-skill-from-github.py \
  --repo nolangz/pixel2motion \
  --path . \
  --name pixel2motion

安裝新 skill 之後，記得重啟 Codex，skill 才會正常出現在可用列表裡。

Step 2：生成 logo 概念

先請 logo-generator 生成六個不同 SVG 概念，不要一開始就做動畫。被選中的 logo 必須幾何簡單，且有明確部件可以成為 animation actors。

Base Logo Prompt

Generate 6 distinct SVG logo concepts.
Use a 0 0 100 100 viewBox for icon concepts.
Keep the geometry simple, scalable, and motion-ready.
Avoid decorative clutter.
Use clear semantic parts that can later become animation actors.
Create one selected direction and explain why it was selected.
Export final SVG and PNG source assets.

品牌 prompt 範例：

AURALIME Prompt

Create a fresh citrus beverage logo named "AURALIME".
The visual language should feel fresh, buoyant, crisp, sunny, and clean.
Use lime green, citrus yellow, orange, and deep green.
Explore lime slices, leaves, droplets, liquid waves, bubbles, and packaging-friendly badge forms.
Generate 6 distinct SVG logo concepts.
The selected concept should be easy to animate as separated parts: rind, core, citrus segment lines, leaf, droplet, splash wave, wordmark, and underline wave.
Avoid overly cute fruit mascots.
Keep the logo clean enough for a beverage brand and bright enough for a short-form video hook.

選擇規則：不要只選靜態圖最好看的，而是選語意部件最清楚、最適合拆開動畫的方向。

Step 3：整理可動畫化 SVG

最後的 logo.svg 要為 motion 準備，而不是只求靜態顯示。

每個會動的部件要有穩定 ID。
一個元素或 group 只代表一個語意部件。
會 draw-on 的路徑加上 pathLength="1"。
避免雜亂的 trace geometry。
文字和圖形標誌要分開。
動畫用 semantic groups 做 transform，不要依賴匿名 nth-child selectors。

好的 SVG actor ID 像這樣：

Semantic IDs

AURALIME: #lime-rind, #lime-core, #segments, #leaf, #droplet, #splash-wave, #wordmark, #word-wave

Step 4：使用 pixel2motion 動畫化

先把 final SVG 轉成 PNG source assets。透明 PNG 用於輸出，白底 PNG 用於 static QA。

SVG to PNG

$ python /tmp/logo-generator-skill/scripts/svg_to_png.py \
  logo.svg \
  --output source_transparent.png \
  --width 1680 \
  --height 640

White-background QA source

from PIL import Image

img = Image.open("source_transparent.png").convert("RGBA")
base = Image.new("RGBA", img.size, "white")
base.alpha_composite(img)
base.convert("RGB").save("source.png")

接著讓 pixel2motion 撰寫 motion.css，並打包成 logo_motion.html。

Build animated HTML

$ python /tmp/pixel2motion/scripts/animate_svg_showcase.py \
  logo.svg \
  --css motion.css \
  --out logo_motion.html \
  --title "AURALIME Logo Motion" \
  --duration-hint 1280 \
  --background "#f4fff2"

Motion prompt 範例：

AURALIME Motion Prompt

Animate AURALIME as a fresh citrus beverage hook.
The reveal should feel fresh, buoyant, and crisp.
Start with the lime forming from a small blurred seed.
Expand the rind and core like a ripple.
Rotate the leaf into place on a soft arc.
Draw the citrus segment lines in staggered order.
Drop the orange citrus droplet with a gentle squash and rebound.
Reveal the wordmark and complete the liquid wave underline.
Final duration: 1280ms.

Step 5：檢查動畫品質

不要因為動畫看起來炫就直接收工。至少要檢查 static fit、motion frames、final-frame alignment。

Static geometry QA

$ python /tmp/pixel2motion/scripts/render_overlay.py \
  logo.svg \
  source.png \
  --out outputs/fit_iterations/01_static_overlay.png \
  --render-out outputs/final_render.png \
  --report outputs/fit_metrics.json

$ python /tmp/pixel2motion/scripts/overlay_progress_strip.py \
  --source source.png \
  --dir outputs/fit_iterations \
  --pattern "*overlay*.png" \
  --final-image outputs/final_render.png \
  --out outputs/overlay_progress_strip.png

Overlay progress strip 用來檢查 SVG geometry 是否對齊原始靜態 source。

接著用 ?t= timestamp 捕捉 deterministic frames。

Motion frame capture

$ python /tmp/pixel2motion/scripts/capture_motion_frames.py \
  logo_motion.html \
  --times 0,210,420,560,740,920,1160,1280 \
  --out outputs/motion_frames \
  --strip outputs/motion_strip.png \
  --report outputs/motion_capture_report.json

Motion strip 可以快速檢查動畫是否有 anticipation、action、overlap 和 final settle。

Final-frame check 會比較 ?static=1 和 ?t=<final-duration>。AURALIME 這個例子達到 max_abs_diff: 0，代表動畫最後一幀精準落在靜態 logo。

Step 6：輸出透明素材

Preview export 可以用來快速檢查，但真正剪輯要用透明輸出檔。

Transparent Export

$ python export_logo_motions_transparent.py

MOV ProRes 4444：1920x1080、30fps、alpha channel。
WebM VP9 alpha：1920x1080、30fps、alpha channel。
APNG：1920x1080、alpha channel。
PNG sequence：exports/transparent_frames/。

推薦放進剪輯軟體的檔案：

Final Files

auralime-logo-motion/exports/auralime-logo-motion-transparent.mov

不要把 GIF 當最後交付檔。GIF 只有 256 色，邊緣和漸層通常會糊。

最終檢查表

Logo concept 幾何乾淨，且有明確 semantic actors。
logo.svg 裡所有動畫部件都有穩定 ID。
Draw-on paths 使用 pathLength="1"。
source_transparent.png 和 source.png 都已存在。
Overlay QA 沒有明顯 geometry mismatch。
Motion strip 能看出預期 timing 和 motion personality。
動畫最後一幀與靜態 logo 對齊。
透明輸出是真 alpha，不是假背景色。