Handwriting Text

以 SVG pathLength 逐筆描繪的手寫文字動畫，內建單線字型，也支援自訂簽名路徑。

載入預覽⋯

Playground

即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。

文字內容text

單筆畫時長（秒）duration

0.7

筆畫間隔（秒）stagger

0.18

線寬strokeWidth

循環重繪loop

觸發時機trigger

<HandwritingText />

npx shadcn@latest add https://webberui.com/r/handwriting-text.json

或在 components.json 設定 registries 後，改用 @webberui/handwriting-text 安裝。

安裝依賴後，從 registry JSON（/r/handwriting-text.json 的 files[0].content）複製 handwriting-text.tsx 原始碼到你的 components/ui/ 目錄：

npm install motion clsx tailwind-merge

傳入 text，會以內建單線字型逐筆描繪（文字自動轉為大寫）：

import { HandwritingText } from "@/components/ui/handwriting-text";

<HandwritingText text="Webber" className="text-5xl font-medium" />

若要描繪簽名或花體，改傳 paths（SVG 路徑 d 陣列）並搭配 viewBox：

<HandwritingText
  paths={["M10 66 C 24 20 40 22 42 60 …", "M6 90 C 90 76 200 76 262 88"]}
  viewBox="0 0 272 100"
  label="手寫簽名"
/>

Prop	型別	預設值	說明
`text`	`string`	—	要描繪的文字，以內建單線字型渲染（自動轉大寫）；與 `paths` 二擇一
`paths`	`string[]`	—	自訂 SVG 路徑（`d` 字串陣列），提供時取代 `text`
`viewBox`	`string`	`"0 0 100 100"`	`paths` 模式的 viewBox；`text` 模式會自動計算
`label`	`string`	—	`paths` 模式提供給輔助科技的文字說明
`duration`	`number`	`0.7`	單一筆畫描繪時長（秒）
`stagger`	`number`	`0.18`	相鄰筆畫開始的間隔（秒）
`delay`	`number`	`0`	整體開始前的延遲（秒）
`strokeWidth`	`number`	`5`	線寬（viewBox 單位）
`fill`	`boolean`	`false`	描繪完成後淡入填色，適合封閉路徑；`loop` 時忽略
`loop`	`boolean`	`false`	是否循環重繪
`trigger`	`"view" \| "hover" \| "mount"`	`"view"`	觸發時機
`once`	`boolean`	`true`	`trigger` 為 view 時，只在第一次進入視口播放
`className`	`string`	—	外層容器；text 模式以 `font-size` 控制尺寸，paths 模式以寬度控制
`svgClassName`	`string`	—	直接套用到 `<svg>`，可覆寫預設尺寸類別

尺寸：text 模式的 <svg> 高度為 1em，用 text-5xl 之類的字級類別即可縮放；paths 模式寬度撐滿容器，用外層寬度控制大小。
顏色：描邊使用 currentColor，直接用 text-neutral-* 等文字色類別上色即可，深淺色主題各自設定。
單線字型：內建 A–Z、0–9 與常見標點，字母皆為大寫；每個字符拆成數筆畫並依書寫順序描繪。未收錄的字符會以空白間距處理。
循環：loop 開啟時各筆畫共用相同週期，重繪時仍保持原本的錯位順序，不會亂序閃動。
觸發：trigger="hover" 時容器可聚焦（tabIndex=0），滑鼠移入或鍵盤 focus 都會重新描繪。

使用者系統開啟「減少動態效果」時，直接顯示描繪完成的靜態成品，不播放動畫。
text 模式下容器帶 role="img" 與 aria-label，並保留一份 sr-only 文字供螢幕報讀。
paths 模式請透過 label 提供文字說明；未提供 text 也未提供 label 時，整體以 aria-hidden 對輔助科技隱藏。