资源 · PIXEL2MOTION

Logo 動畫逐秒計錢？Pixel2Motion 一張 PNG 出到可播嘅 HTML

【你個 logo，係咪永遠淨係識企定定？】 新網站上線，你話「想開頭有段 logo 動畫」——設計師報價返嚟：逐秒計。一個 brand intro 排期幾星期，好正常。 求其叫 AI 幫手整？兩個經典死法：放大即穿煲（邊緣起狗牙）；一式一樣、直線咁郁（字同 mark 齊齊硬郁，一眼假）。 問題根子：個 logo 從來冇被「重畫」過，就直接畀人去「郁」。而家有第三條路。 【先重畫，再郁，最後驗——三關】 Pixel2Motion 係開源 Logo-to-Motion Skill。做法同求其整相反： 第一關 PIXEL——睇清楚邊啲係 mark、邊啲係字，每部分將來分開郁。 第二關 VECTOR——用最少曲線重畫。平滑閘門：有狗牙唔收貨。最終格合約：動畫最後一格一定要同靜態 vector 完全一樣。 第三關 MOTION——先寫劇本。時間軸 20/50/30（蓄勢／主動作／收尾），唔準齊齊郁。出嚟係零依賴單檔 HTML：replay／慢動作／速度／減動態模式。 【憑咩信佢？2,123 個星】 GitHub 2,123★／182 forks（2026-08-30 官方 API 實數）。2026 年 6 月 11 日第一個 commit，兩個半月衝到二千幾星。五組示範案例現場播。第三方 dev.to、madhatjerry.com、GitCode 全 curl 200。授權 MIT：商用都得。作者 Nolanlai。 【邊個用得著？】 Startup 網站 splash；SaaS 登入頁 reveal；小店 mark 拍 IG 開場；細 team 交片前用 HTML 畀客 confirm 方向。 【點樣落地？三步】 第一步，同你個 AI 幫手講：「幫我裝 pixel2motion 呢個 skill」。 第二步，丟 logo：「呢個係我哋公司 logo（PNG），幫我整一段 brand splash 動畫。」 第三步，收 logo.svg ＋ logo_motion.html（雙擊即開）＋ motion_spec.md。 【幾多錢？開源 MIT，自己唔使畀錢】 MIT License——免費、可商用。commercial preview 喺 pixel2motion.com 未正式開賣；開源 skill 本身已經完整可用。 【想即刻睇真啲？】 三個連結見下面卡片：GitHub、live demo、現場示範。