motion2code：把動態影片拆成可改的 SVG 程式，逐格比對如何做？
motion2code 是把動態設計影片重建為 SVG 與 GSAP 程式的開源技能。本文說明取樣、時間軸、逐格差異與循環接縫的檢查方法，並區分動畫重建、互動網站與參考素材的使用範圍。
motion2code 想解決的是動畫交付後「連一個字都不好改」的問題。因為生成影片通常已經把文字、圖形與動作壓成畫面，要換品牌顏色或調整節奏，就得重新處理整支影片。
原作者 Lovis Odin 在 GitHub 公開這套技能，讓程式代理依照參考影片，重建可修改的向量動畫。2026 年 10 月 23 日的 X 討論把這個新專案帶到更多創作者面前。
向量圖以線條、形狀與文字描述畫面，SVG 就是一種能放進網頁的向量格式。GSAP 則負責安排這些物件何時移動，讓畫面回到可以用程式調整的狀態。
這種做法適合扁平圖形、動態字體與介面展示，因為畫面結構比較容易拆解。但如果參考片充滿實拍材質、人物表情或複雜光影，就需要先評估哪些部分能合理重建。
它值得關注的地方，是把驗證方法一起交給代理：先看幀，再寫程式，最後用同一時間點的兩張圖檢查差異。作品是否接近參考，因此有了可追查的依據。
要開始使用前，先分清你需要的交付，是可播放的動畫網頁，還是能讓人實際操作的網站。
motion2code 如何把參考影片變成可改的動畫？
這套技能先把影片拆成代理能讀取的視覺資料，再要求代理用形狀與時間軸重建。依 原作者 README，流程包含取樣畫面、接近硬切處的畫面，以及色盤與循環判斷。
因為代理若只讀一句「照這支影片做」，很可能自行猜測節奏，最後得到相似風格，卻在錯誤時間出現錯誤動作。先把關鍵畫面保存，能讓描述回到具體的時間與位置。
為什麼每隔四分之一秒取樣？
專案的研究腳本會每隔 0.25 秒取一張畫面，並額外保存偵測到的切換前後畫面。這讓代理看得到正常節奏，也不會只靠固定取樣跳過突然換景的瞬間。
例如一個圓形先縮小，接著變成字母中的圓點，重要的可能就是變形前後短短幾幀。如果取樣剛好落在兩端，中間的承接容易被忽略，所以轉場附近需要更密的觀察。
腳本也會分析畫面色盤。因為扁平動畫常靠少數品牌顏色建立識別，直接從來源取得色碼，比讓模型憑印象寫一個「差不多的藍色」更容易維持一致。
原作者的畫廊放了六個案例，包含動態字、眼睛變形與網站操作展示。這些範例的來源影片由 MiniMax H3 Max 生成，再由 Claude Opus 5.5 配合技能重建，屬作者示範。
但案例完成不代表任何輸入影片都能有同樣結果。因為字形複雜度、遮擋與動作數量不同，第一次測試仍應選範圍小、形狀清楚的片段，確認自己的素材是否適合。
一條時間軸為什麼重要？
專案要求由一條 GSAP 時間軸管理動畫，並提供可以跳到指定秒數的介面。這讓第六秒的畫面可重複取得，而不用每次播放到接近六秒時，憑手感按暫停。
如果不同物件分別使用各自的計時器，畫面可能隨載入速度改變。當驗證時無法重現同一瞬間，就很難知道差異來自程式錯誤，還是播放時間沒有對齊。
因此統一時鐘同時幫助修改與檢查。設計師要把某個動作延後，可以調整對應時間。驗收的人也能在相同時間比較來源與重建畫面，避免只說整體感覺不對。
逐格差異與循環接縫要怎麼檢查？
重建完成後，專案提供把參考與程式畫面並排的工具。它可以列出不同時間點的差異，也可以挑出差異最大的片段，讓修改先集中在最明顯的問題。
這比只看最後一支影片更有用。因為快速轉場可能只錯幾幀，正常播放時難以描述。但把兩邊停在同一時間，就能看見是位置、尺寸、色彩還是節奏出了問題。
差異分數能替設計師決定嗎？
差異分數適合當作找問題的入口，但不能單獨決定作品是否合格。例如文字重新排版後，像素差異可能很大，卻仍符合品牌規範。相反地，一個重要按鈕拼錯字，面積雖小仍必須修改。
因此驗收時應搭配明確要求。品牌名稱、必要文案與構圖可以逐項確認，動態節奏則配合並排播放與定格檢查，讓數字與實際用途互相補充。
原作者特別要求依據來源提示中的正確文案，因為生成影片本身可能把字拼錯。這代表重建時要理解交付意圖，不能為了像原片，就把已知錯字重新寫進程式。
循環不跳一下，靠的是首尾一致
專案要求動畫最後一刻回到開頭畫面，並以腳本檢查接縫。這對網站背景與等待動畫很重要，因為觀看者可能看很多次，一次小跳動會在循環後反覆出現。
假設最後一幀的圓形位置比第一幀偏了一點，影片仍然能播放，但接回開頭時就會抖動。把首尾固定成可比較的狀態，才方便找出這種細節。
原作者的輸出腳本也採逐格渲染，透過時間定位依序取得畫面。因為每幀都對應已知時間，所以可以減少一般螢幕錄影可能出現的掉幀或重複幀，讓交付更容易重現。
這些方法是專案提供的工作設計，本文沒有把示範案例當成自行測試。若要用在正式案子，仍要在自己的瀏覽器、字體與輸出尺寸上確認一次。
延伸閱讀：Claude 動畫做完怎麼交付？HTML、SVG 與 MP4 的用途和檢查重點
網站錄影轉成真網站，還要補哪些內容？
專案把網站操作影片的目標再往前推一步，要求產出可以捲動、按按鈕與使用鍵盤的頁面。因為播放一段操作錄影，與讓使用者真的操作，是兩種不同的交付。
例如片中出現一個天氣滑桿，動畫版本只需要依時間移動滑桿。互動版本則要根據使用者拖曳的位置改變畫面，不能讓按鈕看起來存在，實際上卻只是一段預錄動作。
滾動動畫如何連到使用者行為？
原作者提到用 GSAP ScrollTrigger 連接頁面捲動與動畫進度。這可以讓物件位置跟著閱讀過程改變，但仍需測試螢幕大小與捲動方向，因為頁面可用空間會影響效果。
在手機上，橫向排版可能要改成直向，觸控也不能照搬滑鼠懸停。如果只以桌面影片為依據，重建結果容易保留漂亮外觀，卻忽略手機使用方式。
原作者提供的網站案例包含真實頁面與重播版，讓人能分別看互動和影片比較。這個區分很實用，因為動畫驗收關心固定時間點，網站驗收則關心操作能否導向正確結果。
但一個前端互動頁面並不自動具有登入、資料儲存與付款等後端能力。如果要把展示頁升級成產品，就得另外界定資料來源與服務流程，不能從外觀相似推導出功能完整。
可縮放不代表增加來源細節
SVG 放大後仍能保持線條清晰，因此原作者展示可以輸出到很高解析度。這是向量描述帶來的特性，適合需要不同尺寸的文字與幾何圖形。
但來源影片模糊的產品細節，不會因輸出到更高解析度就變成真實資訊。如果代理補畫了原片看不清的形狀，那是重建時的選擇，仍要由設計師確認是否符合品牌原稿。
因此交付清單最好同時保存程式與輸出影片。影片便於傳送審閱，程式則讓後續改字、換色與調整時間有依據，兩種格式各有用途。
延伸閱讀：Claude 動畫教學：用 SVG 製作 Logo、Loading 與動態圖表
第一次使用，可以怎麼縮小範圍？
先挑一段只有少量物件的短片，並準備你有權使用的來源與正確文案。因為這套工具會重建視覺結構，素材權利與品牌規範仍是輸入條件，開源程式不會替你取得別人的作品授權。
依 專案授權說明，程式使用 MIT 授權。README 另外註明畫廊的來源影片提供低解析版本，是用來比較。因此程式授權與每項素材用途需要分開看。
環境方面，原作者列出 Python 3.9 以上與 ffmpeg，需要開瀏覽器的腳本還用到 Playwright。這些是執行流程的基本條件，使用者可以先檢查自己的環境，不必一開始就安裝所有額外工具。
把第一支短片完成後，先試一個實際修改。例如把品牌色換掉、改一行文字，再重跑指定時間點的比較。因為可修改是這個專案的核心價值，若連小改都會破壞全片，就還需要整理程式結構。
對創作者而言，最值得採用的是可重現的驗證習慣。即使最後沒有沿用整套技能，只要保留來源、時間軸、差異畫面與可編輯檔案，交接給下一位設計師時也會清楚許多。
字體、外部資源與時間定位，也會影響重現
專案對頁面的要求，包含字型載入後才準備好畫面，以及把指定時間的畫面固定下來。因為字型若在截圖後才換掉，原本正確的文字寬度可能改變，差異比較就會失去共同基準。
這也說明，動畫驗收不能只看檔案能不能開。若頁面依賴外部字型或腳本，還要確認載入失敗時會發生什麼，特別是交付到不同網路環境後，是否仍能重現同一版畫面。
原作者列出的自動檢查，還包含程式錯誤、網路請求、是否自動播放，以及時間定位是否有決定性。所謂決定性，是同一個時間點重複取得的畫面應相同，這樣修改前後才有可比較的依據。
若需求是輸出影片，可以保存固定尺寸、幀率與字型版本，再依時間軸逐格輸出。若需求是放到網站，則還要測讀者真正會使用的視窗大小，因為網頁會受排版與載入條件影響。
把可修改性放進交付範例
實際交接時，可以請交付者現場完成一次小改，並重新輸出同一時間範圍。例如把一個字替換掉，確認文字沒有被拆成無法辨認的路徑，也確認動作仍對準節奏。
這項測試能直接看出後續維護方式。因為理論上可編輯的檔案，若物件沒有命名、時間散落各處，下一個人仍可能花很多時間找設定，所以清楚結構也應算在交付品質裡。
如果代理為了接近原片而使用特別處理，最好另外說明。例如某一幕因為原片存在無法合理還原的變形，而改用近似動畫，保留這項差異，能讓審閱者知道哪些是刻意選擇。
需要反覆改版的扁平動畫，適合先試重建
如果你的工作常遇到同一支動畫換文案、換品牌色與改尺寸，motion2code 的方向有實際意義。因為它把畫面變回可調整的物件，並要求留下修改是否正確的證據。
若主要需求是實拍影像或複雜人物表演，則適合先保留影像流程，只把簡單圖形拆出來試。你可以從一段短片開始，完成一次修改與驗收，再決定是否擴大使用，也可免費訂閱 AI 郵報追蹤後續案例。
FAQ：motion2code 常見問題
motion2code 會把影片直接嵌進網頁嗎？
專案的重建規則要求使用 SVG 形狀與程式動畫，禁止直接嵌入來源影片來假裝完成。
它能把所有影片變成完全一樣的程式嗎？
原作者提供的是重建流程與案例，並沒有保證所有素材都能精準還原。複雜實拍與遮擋需要另外評估。
我可以直接改作者示範影片來接案嗎？
程式與素材的授權需分開確認。README 對畫廊來源片註明比較用途，不能直接把開源程式授權延伸到所有素材。
