讓 logo 動起來,當影片片頭
丟一張 logo,AI 做出 3 秒開場動畫
- 費用
- 免費
- 步驟
- 2 步
- 適合
- 老闆
- 費用說明
- 開源免費(MIT 授權),裝在 Claude Code 裡用;作者正在推出付費代做服務,自己做不需要
- 我的實測
- 2.7 秒片頭,一支不到 80 KB
- 查證日期
- 2026.10.11
這是什麼
Pixel2Motion 是一個裝在 Claude Code 裡的 skill。給它一張 logo 圖片,它先把圖片描成乾淨的向量圖,再把 logo 拆成幾個零件,一個一個排好出場順序,做成一段開場動畫。
它照迪士尼的動畫原則來排動作,例如出場前先往下蹲一下、落地時壓扁再彈回來,所以動起來不會像投影片那樣硬硬的。
誰需要
- 想在 Reels、YouTube 影片開頭放自己 logo 的店家
- 網站想要一個會動的開場或載入畫面的人
要不要錢
免費開源。作者正在推出付費的代做服務,自己用 skill 做不需要。
怎麼開始
- 把下面這段貼給 Claude Code:
請幫我安裝 Pixel2Motion(https://github.com/nolangz/pixel2motion)到全域 skills,
安裝前先讀過內容,跟我說它會不會連網路、會執行哪些程式。
- 把 logo 圖片放進資料夾,跟它說「用 Pixel2Motion 把這個 logo 做成 2 到 3 秒的片頭」。要直式(Reels)還是橫式(YouTube)先講清楚。
我實際怎麼用
我拿這個網站左上角的小卡片圖示,加上「Wendy 玩 AI」幾個字,請它做成片頭。它排出來的順序是:卡片從上面落下、壓扁再彈起,左上角的粉色標籤掉下來,兩條格線由左往右畫上去,「AI」放大蓋章,最後右邊的字一個一個浮上來。
做完它會自己驗收,我覺得這兩項最實用:
- 動到一半有沒有被裁掉。 第一版卡片往下蹲的時候,底部被切掉一塊,它抓到之後把四周留白加大、蹲的幅度改小
- 最後一格是不是跟原本的 logo 一模一樣。 它把動畫最後一格跟靜態 logo 逐點比對,差 0 個像素
成品是一個可以重播、放慢的網頁,加上直式、橫式兩支 2.7 秒的影片,每支只有 50 到 70 KB,放進任何影片開頭都不會讓檔案變大。
小提醒
- logo 本來就有向量檔(SVG)最省事。 它會直接跳過「描圖」那一步;只有 PNG、JPG 也可以,但描圖要多跑幾輪。
- 它附的截圖程式要 Python 版的 Playwright。 我電腦只有 Node 版,請 Claude 改用 Node 版自己截,結果一樣。
- 字型要內嵌。 logo 旁邊有中文字的話,請它把用到的那幾個字的字型一起包進去,不然換一台電腦字型就跑掉。