Signature animation 開源簽名動畫，打英文名就當場手寫

用 AI 摘要這篇文章：

ChatGPT Claude Perplexity Google Grok

在輸入框裡打 Claude，C 落筆，l 拉長，a 收尾，每敲一鍵就有一個字母用筆畫慢慢描出來，像有人坐在螢幕另一邊替你簽名。這是 CodePen 上一支叫 Signature animation 的開源小工具：打英文名字，畫面即時演出一場手寫動畫，不用註冊、不用安裝任何東西。CodePen 是前端工程師放程式展示的社群平台，上面的作品叫「筆」，一支筆就是 HTML、CSS、JavaScript 三段程式的組合；這類筆的品質落差極大，而這支屬於完成度高的那一類。

它真的足夠小。整支筆的 JavaScript 只有兩千零四十三個字元，加上樣式與一個隱藏的字母庫，全部塞在一頁裡。我實際操作了幾輪，也把整份原始碼讀完，先講結論：它給你的是一場表演，而且是一場執行得很扎實的表演；但它不是簽名產生器。名字只能用英文字母，數字打上去會安靜消失，改字的時候畫面會疊出殘影，而且整支筆沒有任何匯出功能，播完就是播完。想拿一份簽名圖檔去貼文件的人會空手而歸；想看懂「手寫動畫是怎麼做的」的人，反而能在兩千字元的程式裡拆到真東西。

打名字就動，退格才會整排重畫

操作介面只有一個名字欄位和一顆 SIGN 按鈕，整個畫面是一張放在粉彩漸層底色上的白色圓角卡片。還沒打字的時候，SIGN 按鈕是半透明的、按不按都沒差；第一個字母敲下去，卡片立刻「醒過來」，欄位邊框變深、按鈕變實，代表它進入工作狀態。逐鍵輸入的時候，每個字母被敲下的那一刻就開始播放描線動畫，打字節奏快，動畫就一個接一個接上，有連續書寫的感覺。空格也有處理，畫面上會留一個固定的空白寬度，名字分成兩段也接得起來。

卡片下半部在你敲第一個字母時就展開了：一行灰色的 SIGNED BY 落款淡入，你的名字以手寫體落在落款下方，底下襯一條水平的簽名線。至於 SIGN 按鈕，原始碼裡它沒有綁上任何動作，按下去什麼也不會發生；這張完成畫面就是整支筆的終點，沒有下一步了。

Pin

真正值得注意的是退格。按一次退格，整排簽名會依照欄位裡剩下的字，全部重新畫一遍，而且這次是瞬間出現、不播動畫。這個設計很務實：你打錯字按住退格狂刪的時候，不需要每刪一個字就看一次動畫重播。代價是，修完字之後想再看一次完整的簽名動畫，得把名字整個清掉重打一遍。欄位本身最長收兩百五十六個字元，對簽名來說綽綽有餘；輸入的過程全程即時，沒有任何送出按鈕要按，動畫也不會因為你中途停頓而中斷節奏。

從原始碼看，這套重畫邏輯是整支筆最核心的設計：每次按鍵只處理「新進來的那一個字」，退格則觸發「按欄位現值整排重建」。聽起來只是實作細節，但下一節會看到，正是這條規則讓它在某個常見操作上出了怪狀況。

數字安靜消失，全選重打會疊出殘影

實測先撞到的一件事：它只認英文字母和空格。我輸入 abc123，畫面上只有 a、b、c 三個字母被畫出來，數字完全不見，欄位裡倒是老老實實顯示著 abc123。按退格讓它整排重建，結果一樣，只畫 abc。原因寫在原始碼裡：按鍵事件的過濾條件只比對字母鍵與空白鍵，數字鍵根本不在名單上。所以名字裡有數字的人，例如想簽 Tony2K，畫面上只會出現 TonyK，那個 2 像沒打過一樣。

另一件事更實際，而且一般使用者一定會踩到：全選重打會殘影。我先打了 Claude，畫面六個字母，然後按 Cmd+A 全選，直接打 Monet 蓋掉。欄位裡顯示的是 Monet，畫面上卻是 Claude 和 Monet 的字母疊在一起，先前操作留下的字母也還疊在一旁，數出來十五個字母框。原因在於「全選再輸入」不會觸發退格事件，而每個新按鍵只負責把自己畫上去，沒有人去清掉舊字母。修法簡單到有點好笑：隨便按一次退格，整排立刻依欄位現值重建，畫面馬上乾淨，只剩 Mone 四個字母。記住這個順序就好：改字先按退格，再繼續打。

還有一個邊界要說清楚：中文輸入法打的名字不會有簽名。這點我沒有實測，但從原始碼的按鍵過濾邏輯可以推得出來，輸入法組字時送出的按鍵訊號和英文字母不同，不會命中任何字母比對。想簽中文名、或名字裡中英混合的人，這一關就過不去；它只吃英文字母，對慣用中文署名的使用者來說是第一道門檻。

手寫動畫是怎麼畫出來的

把原始碼攤開看，這場表演的原理其實是 SVG 描線動畫的教科書示範。字母藏在頁面裡一個看不見的字母庫，大寫一套、小寫一套，每個字母都是一條畫好的 SVG 路徑。你敲下按鍵，程式就把對應的字母複製出來放到簽名區，路徑一開始被設成「完全描不到」的狀態，五十毫秒後把位移值歸零，瀏覽器的轉場效果就沿著路徑把筆畫描出來，每個字母的動畫長度固定零點二秒。

幾個數字可以說明這不是隨手拼湊的成品。字母庫裡每個字形的路徑長度都不同，樣式表裡的描線長度共有四十五種不同數值，從十六到二百四十四都有，逐一分配給大小寫五十二個字形，讓每個字母的筆畫都能被完整描過。字母之間的距離也是逐字母手調的負邊距，讓相鄰筆畫有手寫的傾斜與交疊，這是它看起來「像簽名」而不是「像字體展示」的關鍵；這種工夫沒有捷徑，二十六個字母乘上大小寫兩套，每個組合的間距都是手工校出來的。

還有一個容易忽略的細節：簽名本體完全不依賴字型，它靠路徑構成，與字型無關。頁面另外從 Google Fonts 載了兩套字給介面文字用，輸入框和落款看起來乾淨，但那兩套字型和你的簽名長相無關。整份 JavaScript 只有兩千零四十三個字元，沒有框架、沒有套件，一頁讀得完。想學這招的前端人，這是少數可以完整讀懂再改造的範例。

順帶一提效能與隱私：筆的 JavaScript 沒有任何對外請求，也沒有統計腳本，你打的名字不會被送到任何地方；頁面僅有的外部連線，是載入兩套字型和一張寫在 CSS 裡的背景圖。操作過程中看得到的廣告與流量統計，都屬於 CodePen 平台的外層頁面，不在這支筆的程式裡。換句話說，它的隱私表現不是「有寫隱私政策」，而是「沒有把你的輸入送出去的程式碼」，這對臨時想打個名字試手感的人來說是最乾淨的一種答案。

想把簽名帶走，只有截圖一條路

這是整支筆最硬的限制：沒有任何匯出。整份頁面裡找不到一個下載按鈕，沒有 canvas 畫布可以存圖，唯一的按鈕 SIGN 在原始碼裡沒有綁任何動作，它和那行 Signed by 落款一樣，都只是完成畫面的裝飾。沒有顏色、粗細、速度、字體可調，長什麼樣就是什麼樣。

拿實際需求對照會更具體。要在合約或報價單上簽名，你要的通常是透明背景的 PNG，能縮放不失真的向量檔更好，而且能重複使用；要放 Email 簽名檔，你要的是固定尺寸的圖檔。這些它都給不了。可行的繞法只有瀏覽器層級的：動畫播完停在完成畫面，截圖當圖檔用；想留住動畫本身，就得錄螢幕。這兩條路當然都能做，只是出來的東西離向量檔很遠，解析度取決於你的螢幕，背景是那張粉彩色的模糊底圖，後製去背還要自己來。

開源是真的，商用記得帶授權聲明

「開源」這個標籤在它身上成立，而且有明確依據。CodePen 的官方授權文件寫明：公開發布的筆自動套用 MIT 授權，授權跟著筆本身走，無論你在哪裡看到它。這代表你可以把這兩千字元拿去用、改、放進自己的網站或商業專案；條件是保留著作權與授權聲明，而且 CodePen 加了一條：衍生作品要沿用相同的授權方式。換句話說，拿去做客戶網站的簽名互動效果沒問題，把授權文字一起帶走就好；想改成閉源商用，這條路就不通。想把它搬進自己網站的開發者，照這個走即可。

兩年沒變，也不太需要變

這支筆至少從二零二四年八月就已經存在：網頁典藏在那年八月底第一次收錄它的網址，十一月與隔年四月的典藏快照裡，它的行為與今天看到的一致。作者的 CodePen 個人頁幾乎空白，沒有自我介紹，也看不出有把它經營成產品的打算。對一支完成度足夠的單頁小筆來說，不更新就是穩定的另一種說法，兩年來它一直在原地，打開就能用；相對地，殘影這類小毛病，大概也不會有人修了，用它的人只能自己繞。

真的要簽文件，往別的工具去

把需求擺在前面看，判斷其實很清楚。你若是要一份能放進合約、報價單或 Email 簽名檔的圖，電子印章產生器做印章、PDF 蓋章工具直接在文件上落章，都比截圖動畫務實；想把一段文字變成手寫風格的圖，文字轉手寫工具輸出的才是能用的檔案；想要書法感的手寫字型，書法字體產生器能下載字型檔長期使用；想把文字轉成可以向量的路徑，文字轉 SVG 工具給的是真正的向量檔。

Signature animation 的位置在另一邊：它是靈感與教材。

差別在於用途，不在於品質。簽 E-mail 落款的時候想要一點儀式感、錄一段動畫放在個人頁開場、或者前端作業想學描線動畫的作法，它都很稱職，而且免費、免帳號、打開就能玩。名字用英文、接受殘影要按退格修、成品自己截圖，這三個前提都接受的話，這支筆值得你玩五分鐘。

開始使用

入口在 CodePen，兩種走法都行。打開 codepen.io/kiranpate1/pen/ExBpaeW 會看到編輯器畫面，原始碼與即時預覽並列，右上方可以把檢視切到全頁；或者直接造訪 codepen.io/kiranpate1/full/ExBpaeW，CodePen 會以訪客檢視包一層提示再載入筆，功能一樣。不需要帳號，載入即用，輸入框點下去打英文名就行。打完名字，卡片本身就是完成畫面（SIGN 按了沒有作用），想要檔案就截圖。

Pin

兩個提醒收尾。其一，這些操作都以桌上型電腦的 Chromium 瀏覽器為準，手機的虛擬鍵盤與其他瀏覽器的按鍵行為沒有驗證過，手感可能不同。其二，前面那條再說一次：改字先按一次退格再繼續打，畫面才不會疊字；名字只打英文字母，數字打了也不會出現。