Liquid Logo 免費開源工具，把靜態標誌做成液態金屬動畫

用 AI 摘要這篇文章：

ChatGPT Claude Perplexity Google Grok

我把一張白底黑圖的自製標誌丟進 Liquid Logo，畫面上的標誌幾秒內變成一攤緩緩流動的金屬，邊緣跟著反光。按 S 存下單張 PNG，按 V 錄一段 MP4，前後不用一分鐘，全程沒有註冊、沒有付費牆。

Pin

這類「聽起來便宜到可疑」的免費工具，動手前值得先問三件事：真的免費又開源嗎？上傳的圖會不會跑到別人的伺服器？做出來的檔案能不能接進自己的後製流程？這三題我都在瀏覽器裡實際跑過一輪，答案依序是：MIT 授權、商用沒問題；圖片從頭到尾不出瀏覽器；輸出是一張透明 PNG 加一條 MP4。至於第四個問題「它還會不會更新」，答案比較不浪漫：這個工具是三天寫完的，然後凍結到今天。

免費、開源、不上傳，三個宣稱各自成立到哪裡

先講授權。倉庫根目錄放著 LICENSE.txt，內容是 MIT 條款，README 也白紙黑字寫了個人與商業用途皆可。網頁本身打開就能用，沒有帳號、沒有次數限制、匯出的檔案也不壓浮水印。以「把一則動畫做成品牌素材」的商業場景來說，授權這關是乾淨的。

再講「不上傳」。README 的原文寫「完全在客戶端處理，你的圖片不會離開你的裝置」，這句話實測就能對上：從載入頁面、上傳圖片、算圖到匯出，整段流程的 23 個網路請求裡，沒有任何一筆圖片資料外送。唯一一個非讀取類的請求，是 umami 統計服務的瀏覽事件回報。

不過「完全在客戶端」這五個字要讀仔細。它指的是你的圖檔，不是說這個頁面不連網：控制面板的 dat.GUI、圖示用的 Font Awesome 由 cdnjs 提供，標題字型來自 Google Fonts，瀏覽行為會進 umami 的報表。從 commit 紀錄看，umami 是開張隔天就加進去的，屬於作者開張就固定下來的配備，後來也沒有商業化手腳。在意這層的人有釜底抽薪的辦法：根目錄沒有 package.json、沒有建置流程，就是一堆純靜態檔案，git clone 下來跑 python3 -m http.server，你就有一份自己的 Liquid Logo，要不要留統計碼自己決定。

最後是「免費」的成色。整個站架在 GitHub Pages 上，沒有後端、沒有資料庫，自然也沒有儲存你圖片的地方；頁尾只有一個 Buy Me A Coffee 贊助按鈕，沒有廣告、沒有 Pro 版、沒有積分制。這種架構下的免費沒有暗門，因為它連收費的把手都沒裝。

匯出的是透明 PNG 和一條 MP4，沒有序列圖檔

操作動線很單純：上傳自己的圖，或先按頁面提供的九個示範 Logo 試手感（Apple、Nike、GitHub、Pepsi、PlayStation、Spotify、Mario、Pikachu、YouTube），按 🎲 隨機換一組參數，喜歡了再打開右上角的控制面板逐項微調，懶得調就繼續擲骰子。快捷鍵四個：空格暫停、R 隨機、S 存圖、V 錄影。

Pin

控制面板用的是開源專案常見的 dat.GUI，分成動畫、顏色、標誌三個折疊區。可調的參數不少：速度（0.1 到 2.0）、色彩平滑（3 到 24）、雜訊強度（0 到 10）、樣式尺度、強度、RGB 三個通道各能從 -3 拉到 3、標誌縮放（0.5 到 3 倍）、邊緣互動強度。不想從零開始，就從十組預設裡挑一個起手：Galaxy 是預設值，另外還有 Glow、Wisp、Smoke、Oil Slick、Chrome、Rainbow、Liquid、Magic、Dusk，名字對應的視覺個性差異很大，從霧面流動到油膜彩紋都有。有一個面板不會告訴你的細節：shader 迴圈的硬上限是 16 次，所以「色彩平滑」拉到 16 以上聽起來更細緻，畫面其實不會再變。

實測對預設名稱要有心理準備：我在 Chrome 預設下渲染自製標誌，得到的是偏淡紫與灰綠的大理石紋流動，「鉻金屬」三個字沒有完全兌現。預設只是參數組合的暱稱，實際長相跟標誌的形狀密度高度相關，同一組參數換一張圖就是另一種氣質。所以比較務實的工作流是反過來：先按幾輪 🎲 隨機，看到順眼的停下來，再回面板微調 RGB 三通道與邊緣互動強度。邊緣互動這個參數（0 到 0.3）控制流場繞著標誌輪廓轉彎的力道，數值低時整攤金屬安靜地流，拉高後流動會明顯貼著邊界打轉，是畫面個性差最大的單一參數。

兩種匯出我都在瀏覽器裡實際跑過並打開檔案驗證：

影片檔的規格值得多講兩句，因為它比多數「網頁錄影」工具扎實：在 Chrome 類瀏覽器上，錄影走的是 WebCodecs 硬體編碼路線，H.264、每秒 30 格、16 Mbps 變動位元率，封裝用作者直接綁進倉庫的開源 mp4-muxer（MIT 授權），全程在記憶體裡完成。錄影沒有時長欄位，按 V 開錄、再按一次 V 停止，畫面上會出現提示條提醒你影片存到下載資料夾，想要多長的素材就錄多長。iPhone、iPad、Android 手機與 Firefox 則自動退回瀏覽器內建的 MediaRecorder 錄製，能出檔，但位元率與容器規格由瀏覽器決定，介意的人錄完先檢查檔案。PNG 這邊有個小貼心：檔名自動帶上日期與時間（liquid-logo_日期_時間.png），連錄好幾張也不怕覆蓋。

順帶一提環境需求：整個效果跑在 WebGL 上，等於把每個像素丟給顯示晶片去算，瀏覽器不支援 WebGL 會直接跳提醒視窗。這不是大型 3D 場景，迴圈上限又低，一般內建顯示晶片的筆電跑起來不吃力；反過來說，太舊的機器或純軟體模擬的環境，動畫可能會掉格。

有一件事要先講清楚：網路上部分介紹文宣稱它支援「PNG 序列影格」輸出，工具本身沒有這個功能。我把整份匯出相關的原始碼讀完，能走的路只有兩條，按 S 存單張截圖，或按 V 錄一整段影片，不存在逐格匯出的選項。想在 After Effects 裡逐格後製的人，可行做法是把 MP4 丟進剪輯軟體處理；若是要放在網頁或訊息裡循環播放，通常還要再轉一次 GIF。

另外兩個先天限制也該在動手前知道。畫布永遠是正方形，長方形標誌會被置中、短邊兩側留透明邊（直式圖左右留邊、橫式圖上下留邊）；解析度有上限，上傳圖最長邊超過 1500px 會被等比縮到 1500（示範的 Apple 標誌原檔 1900×2160，進場就被縮成 1316×1500）。需要 4K 或直式版面的人，輸出後得自己放大裁切。

還有去背。工具會自動把「純黑底」或「純白底」的圖挖成透明，判斷方式是從四個角落取色，四角顏色夠一致才會啟動，亮度高於 200 認定白底、低於 30 認定黑底，接著用洪水填充演算法把整片背景清掉。我上傳的白底黑圖正確啟動了這套流程，輸出的 PNG 四角透明無殘留。但彩色底、漸層底、照片底都會被直接跳過，去背沒發生就照原樣算圖；這類圖請先自己處理成黑底或白底再上傳。還沒有標誌可以玩的人，可以先用線上工具畫一張，或讓 AI 產生一個再回來。

檔案體積要抓位元率上限來估：16 Mbps 換算下來每秒最多約 2 MB，實測 1.4 秒的短片落在 2.77 MB，錄十秒片頭大約二十 MB 上下，要傳通訊軟體的人可能得自己再壓一次。

三天寫完就凍結：一則推特 shader 長出來的玩具

看維護紀錄會對這個工具有比較準確的心理預期。倉庫 2025 年 3 月 3 日開張，3 月 6 日敲下最後一個 commit，之後就再也沒有動過，到今天凍結超過一年半。一年半下來累積了兩百多顆星與八個 fork，以這類個人視覺玩具來說是中規中矩的成績，但 Issue 與 PR 的數量都是零，不是問題修完了，是從來沒有人回報過，作者也沒再回來看。

最後三天的 commit 記錄還原了收工的樣子：透明背景匯出、正方形畫布、兩次邊緣平滑化改善、換新圖時自動捲回畫面頂端。看得出作者的目標是把它推到「能順手用」就停筆，沒有繼續雕。同期的待辦清單也原樣留在程式碼開頭：邊緣鋸齒待修、更多雜訊樣式、背景色開關，全都沒有下文。

作者 collidingScopes（社群上叫 stereo.drift）是位多產的創意編碼者，GitHub 上有五十多個公開倉庫，多數是同類型的瀏覽器視覺玩具，照片轉粒子、影片轉 ASCII 字元畫、萬花筒、3D 模型場景都有，而且其他倉庫今年還在更新。工具頁尾也直接放了這些兄弟作品的連結，喜歡液態金屬這路美學的人，頁尾本身就是個小寶箱。不過看一下各倉庫的紀錄，這批兄弟作品多數停在 2025 年年中或更早，和 Liquid Logo 是同一種「寫完就放著」的節奏。換句話說，人還在寫程式，只是這一批作品都已經定格。

它的動畫引擎也不是從零發明。README 的致謝段寫明，起點是 XorDev 在 X 上分享的 Plasma shader。實際讀 shader 原始碼，流程是把上傳的標誌轉成 WebGL 貼圖，偵測邊緣後沿著邊界生成向量場，反覆迭代疊加變形，再以 simplex 雜訊擾動流動感，最後用手寫的 tanh 函數把亮度壓成金屬色階，邊緣反光是把邊界強度餵進亮度計算得出來的，畫面再補上一層細顆粒雜訊，讓金屬面不會太乾淨。讀碼過程還看到一個誠實的細節：金屬高光的時間項在程式裡被乘以零，等於高光其實不會隨時間移動，會動的是底下的流場。這些不影響它好用，但能幫你校準預期：它的現狀就是最終狀態，輸出隨手存檔，因為壞了不會有新版本來救。

把它當片頭素材產生器，別當品牌動畫產線

市面上多數 Logo 動畫服務走訂閱制，模板漂亮，但圖要上雲、月費要繳。Liquid Logo 剛好站在對面：模板只有一種視覺語言（液態金屬），但圖不出門、輸出無浮水印、想商用就商用。這個取捨適不適合你，取決於你要的是「挑一個漂亮模板」還是「一種夠特別的質感」。

適合的場景很明確：自媒體影片的開頭動畫、社群帳號的動態頭像、提案簡報裡那一段會動的標誌、或純粹想玩 shader 參數的人。打開網址、丟圖、擲骰子、錄影，產出速度比打開任何一套剪輯軟體都快。實際走一遍順手的路線是：標誌先處理成白底黑圖上傳，從 Galaxy 或 Chrome 預設起手，擲幾輪骰子挑一個順眼的，錄個五到八秒，回剪輯軟體加上淡出與音效，一支片頭就完成了。

不適合的場景也一樣明確：需要序列影格逐格進後製的專業流程、需要 4K 或自由長寬比的正式品牌識別輸出、以及期待工具持續維護與問題回報管道的團隊。還有一個小提醒，那九個示範 Logo 全是他人註冊商標，拿來試手感無妨，商業用途的輸出請上傳自己的圖。

用一句話收尾：Liquid Logo 是那種「碰到對的需求會覺得撿到」的工具。你的圖不會出門、輸出能直接用、授權允許商用，代價則是接受它是一件完成度剛好、再也不會長大的作品。